HTML5标准，一个Canvas时钟特效演示-JS特效-爱易网页

HTML5标准，一个Canvas时钟特效演示

日期：2014-05-18　浏览次数：20261 次

以下是程序代码

<!DOCTYPE html>
<html>
<head>
<title>canvas时钟</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
<canvas id="canvas" width="200" height="200" style="border:1px solid #000;">您的浏览器不支持Canvas。</canvas>
<script type="text/javascript" language="javascript" charset="utf-8">
 var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 if(ctx){
  var timerId;
  var frameRate = 60;
  function canvObject(){
   this.x = 0;
   this.y = 0;
   this.rotation = 0;
   this.borderWidth = 2;
   this.borderColor = '#000000';
   this.fill = false;
   this.fillColor = '#ff0000';
   this.update = function(){
    if(!this.ctx)throw new Error('你没有指定ctx对象。');
    var ctx = this.ctx
    ctx.save();
    ctx.lineWidth = this.borderWidth;
    ctx.strokeStyle = this.borderColor;
    ctx.fillStyle = this.fillColor;
    ctx.translate(this.x, this.y);
    if(this.rotation)ctx.rotate(this.rotation * Math.PI/180);
    if(this.draw)this.draw(ctx);
    if(this.fill)ctx.fill();
    ctx.stroke();
    ctx.restore();
   }
  };
  function Line(){};
  Line.prototype = new canvObject();
  Line.prototype.fill = false;
  Line.prototype.start = [0,0];
  Line.prototype.end = [5,5];
  Line.prototype.draw = function(ctx){
   ctx.beginPath();
   ctx.moveTo.apply(ctx,this.start);
   ctx.lineTo.apply(ctx,this.end);
   ctx.closePath();
  };
 
  function Circle(){};
  Circle.prototype = new canvObject();
  Circle.prototype.draw = function(ctx){
   ctx.beginPath();
   ctx.arc(0, 0, this.radius, 0, 2 * Math.PI, true);
   ctx.closePath();
  };
 
  var circle = new Circle();
  circle.ctx = ctx;
  circle.x = 100;
  circle.y = 100;
  circle.radius = 90;
  circle.fill = true;
  circle.borderWidth = 6;
  circle.fillColor = '#ffffff';
 
  var hour = new Line();
  hour.ctx = ctx;
  hour.x = 100;
  hour.y = 100;
  hour.borderColor = "#000000";
  hour.borderWidth = 10;
  hour.rotation = 0;
  hour.start = [0,20];
  hour.end = [0,-50];
 
  var minute = new Line();
  minute.ctx = ctx;
  minute.x = 100;
  minute.y = 100;
  minute.borderColor = "#333333";
  minute.borderWidth = 7;
  minute.rotation = 0;
  minute.start = [0,20];
  minute.end = [0,-70];
 
  var seconds = new Line();
  seconds.ctx = ctx;
  seconds.x = 100;
  seconds.y = 100;
  seconds.borderColor = "#ff0000";
  seconds.borderWidth = 4;
  seconds.rotation = 0;
  seconds.start = [0,20];
  seconds.end = [0,-80];
 
  var center = new Circle();
  center.ctx = ctx;
  center.x = 100;
  center.y = 100;
  center.radius = 5;
  center.fill = true;
  center.borderColor = 'orange';
 
  for(var i=0,ls=[],cache;i<12;i++){
   cache = ls[i] = new Line();
   cache.ctx = ctx;
   cache.x = 100;
   cache.y = 100;
   cache.borderColor = "orange";
   cache.borderWidth = 2;
   cache.rotation = i * 30;
   cache.start = [0,-70];
   cache.end = [0,-80];
  }
 
  timerId = setInterval(function(){
   // 清除画布
   ctx.clearRect(0,0,200,200);
   // 填充背景色
   ctx.fillStyle = 'orange';
   ctx.fillRect(0,0,200,200);
   // 表盘
   circle.update();
   // 刻度
   for(var i=0;cache=ls[i++];)cache.update();
   // 时针
   hour.rotation = (new Date()).getHours() * 30;
   hour.update();
   // 分针
   minute.rotation = (new Date()).getMinutes() * 6;
   minute.update();
   // 秒针
   seconds.rotation = (new Date()).getSeconds() * 6;
   seconds.update();
   // 中心圆
   center.update();
  },(1000/frameRate)|0);
 }else{
  alert('您的浏览器不支持Canvas无法预览.\n跟我一起说："Fuck Internet Exploer!"');
 }
</script>
</body>
<</div></div>

<div class="clearfix"></div>
                    </div>
                    <nav aria-label="...">
                        <ul class="pager">
                            <li class="previous"><a href="4667">上一篇：狡猾的按钮特效</a></li>

<li class="next"><a href="701">下一篇：js按指定格式显示日期时间样式特效</a></li>
                        </ul>
                    </nav>

<div class="alert alert-warning" role="alert">
                        <strong>免责声明：</strong> 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
                    </div>

<div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10810' title='网曝富士康500万iphone遭退货是确证的事' target="_blank">
                        网曝富士康500万iphone遭退货是确证的事</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34420' title='百度透露无人驾驶战略 研发三维交通地图' target="_blank">
                        百度透露无人驾驶战略 研发三维交通地图</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34432' title='iPhone 6 Plus要召回是谣言' target="_blank">
                        iPhone 6 Plus要召回是谣言</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34199' title='HDS发布《2013中国CIO洞察白皮书》' target="_blank">
                        HDS发布《2013中国CIO洞察白皮书》</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/16155' title='苹果20年以来首次发债 融资170亿美元' target="_blank">
                        苹果20年以来首次发债 融资170亿美元</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/390' title='巧用百度推行系统 突显竞价效果' target="_blank">
                        巧用百度推行系统 突显竞价效果</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/6910' title='国美苏宁线上首度正面PK 京东列席4月电商战' target="_blank">
                        国美苏宁线上首度正面PK 京东列席4月电商战</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34445' title='百视通：Xbox One汉化获批 游戏迷欢呼吧' target="_blank">
                        百视通：Xbox One汉化获批 游戏迷欢呼吧</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34327' title='打车软件“明补变暗补”背后的小算盘' target="_blank">
                        打车软件“明补变暗补”背后的小算盘</a></li></div>
                   
                
        </ol>
    </div>
</div>

</div>

</div>
            </div>
            <div class="clearfix"></div>

<footer class=" footer navbar-bottom">
<em>友情链接：</em>
    
      <a href="http://www.aiyiweb.com/" target="_blank">爱易网 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云虚拟主机技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云服务器技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">程序设计技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">开发网站 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">APP开发教程 </a>            
    
<br />
<script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=15239353030108964139' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script>

Copyright © 2013-2026 爱易网页 当前在线：529人　
        网站在5时54分10秒内访问总人数：54292人
    当前 9.37%
　<a href="https://beian.miit.gov.cn" target="_blank">粤ICP备18100884号-2 </a>
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({ id: "JszEmKrtpbU59dY5", ck: "JszEmKrtpbU59dY5" })</script>

</footer>

</div>
   
</body>
</html>