中国领先的IT技术网站
|
|

详解通过Canvas + JS 实现简易的时钟

之前学习了下html5中的canvas元素,为了练练手就实现了一个简易的时钟。时钟本身并不复杂,也没有使用图片进行美化,不过麻雀虽小五脏俱全。

作者:来源:博客园|2015-03-10 11:30

沙龙活动 | 去哪儿、陌陌、ThoughtWorks在自动化运维中的实践!10.28不见不散!


之前学习了下html5中的canvas元素,为了练练手就实现了一个简易的时钟。时钟本身并不复杂,也没有使用图片进行美化,不过麻雀虽小五脏俱全,下面就与大家分享一下:

实现效果:


详解通过Canvas + JS 实现简易的时钟

html代码:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5.     <title>Clock</title> 
  6.     <style type="text/css"
  7.     *{ 
  8.         margin: 0
  9.         padding: 0
  10.     } 
  11.     .canvas{ 
  12.         margin-left: 20px; 
  13.         margin-top: 20px; 
  14.         border: solid 1px; 
  15.     } 
  16.     </style> 
  17. </head> 
  18. <body onload= "main()"
  19.  
  20. <canvas class = "canvas" id="canvasId" width = '500px' height = '400px'></canvas> 
  21.  
  22. <script type= "text/javascript" src = "Clock.js"></script> 
  23. </body> 
  24. </html> 

JS代码:

  1. var Canvas = {}; 
  2.  
  3. Canvas.cxt = document.getElementById('canvasId').getContext('2d'); 
  4.  
  5. Canvas.Point = function(x, y){ 
  6.     this.x = x; 
  7.     this.y = y; 
  8. }; 
  9.  
  10. /*擦除canvas上的所有图形*/ 
  11. Canvas.clearCxt = function(){ 
  12.     var me = this
  13.     var canvas = me.cxt.canvas; 
  14.        me.cxt.clearRect(0,0, canvas.offsetWidth, canvas.offsetHeight); 
  15. }; 
  16.  
  17. /*时钟*/ 
  18. Canvas.Clock = function(){ 
  19.     var me = Canvas, 
  20.         c = me.cxt, 
  21.         radius = 150/*半径*/ 
  22.         scale = 20/*刻度长度*/ 
  23.         minangle = (1/30)*Math.PI, /*一分钟的弧度*/ 
  24.         hourangle = (1/6)*Math.PI, /*一小时的弧度*/ 
  25.         hourHandLength = radius/2/*时针长度*/ 
  26.         minHandLength = radius/3*2/*分针长度*/ 
  27.         secHandLength = radius/10*9/*秒针长度*/ 
  28.         center = new me.Point(c.canvas.width/2, c.canvas.height/2); /*圆心*/ 
  29.     
  30.     /*绘制圆心(表盘中心)*/ 
  31.     function drawCenter(){ 
  32.         c.save(); 
  33.  
  34.         c.translate(center.x, center.y);  
  35.  
  36.         c.fillStyle = 'black'
  37.         c.beginPath(); 
  38.         c.arc(00, radius/2002*Math.PI); 
  39.         c.closePath(); 
  40.         c.fill(); 
  41.         c.stroke(); 
  42.  
  43.         c.restore(); 
  44.     }; 
  45.  
  46.     /*通过坐标变换绘制表盘*/ 
  47.     function drawBackGround(){ 
  48.         c.save(); 
  49.  
  50.         c.translate(center.x, center.y); /*平移变换*/ 
  51.         /*绘制刻度*/ 
  52.         function drawScale(){ 
  53.            c.moveTo(radius - scale, 0); 
  54.            c.lineTo(radius, 0);  
  55.         }; 
  56.  
  57.         c.beginPath(); 
  58.         c.arc(00, radius, 02*Math.PI, true); 
  59.         c.closePath(); 
  60.      
  61.         for (var i = 1; i <= 12; i++) { 
  62.            drawScale(); 
  63.            c.rotate(hourangle); /*旋转变换*/ 
  64.         }; 
  65.         /*绘制时间(3,6,9,12)*/ 
  66.         c.font = " bold 30px impack" 
  67.         c.fillText("3"11010); 
  68.         c.fillText("6", -7120); 
  69.         c.fillText("9", -12010); 
  70.         c.fillText("12", -16, -100); 
  71.         c.stroke(); 
  72.  
  73.         c.restore(); 
  74.     }; 
  75.  
  76.     /*绘制时针(h: 当前时(24小时制))*/ 
  77.     this.drawHourHand = function(h){ 
  78.  
  79.         h = h === 024: h; 
  80.  
  81.         c.save(); 
  82.         c.translate(center.x, center.y);  
  83.         c.rotate(3/2*Math.PI); 
  84.  
  85.         c.rotate(h*hourangle); 
  86.  
  87.         c.beginPath(); 
  88.         c.moveTo(00); 
  89.         c.lineTo(hourHandLength, 0); 
  90.         c.stroke(); 
  91.         c.restore(); 
  92.     }; 
  93.  
  94.     /*绘制分针(m: 当前分)*/ 
  95.     this.drawMinHand = function(m){ 
  96.  
  97.         m = m === 060: m; 
  98.  
  99.         c.save(); 
  100.         c.translate(center.x, center.y);  
  101.         c.rotate(3/2*Math.PI); 
  102.  
  103.         c.rotate(m*minangle); 
  104.  
  105.         c.beginPath(); 
  106.         c.moveTo(00); 
  107.         c.lineTo(minHandLength, 0); 
  108.         c.stroke(); 
  109.         c.restore(); 
  110.     }; 
  111.  
  112.     /*绘制秒针(s:当前秒)*/ 
  113.     this.drawSecHand = function(s){ 
  114.  
  115.         s = s === 060: s; 
  116.  
  117.         c.save(); 
  118.         c.translate(center.x, center.y);  
  119.         c.rotate(3/2*Math.PI); 
  120.  
  121.         c.rotate(s*minangle); 
  122.  
  123.         c.beginPath(); 
  124.         c.moveTo(00); 
  125.         c.lineTo(secHandLength, 0); 
  126.         c.stroke(); 
  127.         c.restore(); 
  128.     }; 
  129.  
  130.     /*依据本机时间绘制时钟*/ 
  131.     this.drawClock = function(){ 
  132.         var me = this
  133.   
  134.         function draw(){ 
  135.            var date = new Date(); 
  136.  
  137.            Canvas.clearCxt(); 
  138.  
  139.            drawBackGround(); 
  140.            drawCenter(); 
  141.            me.drawHourHand(date.getHours() + date.getMinutes()/60); 
  142.            me.drawMinHand(date.getMinutes() + date.getSeconds()/60); 
  143.            me.drawSecHand(date.getSeconds()); 
  144.         } 
  145.         draw(); 
  146.         setInterval(draw, 1000); 
  147.     };   
  148. }; 
  149.  
  150.  var main = function(){ 
  151.     var clock = new Canvas.Clock(); 
  152.     clock.drawClock(); 
  153. }; 

代码中涉及到了一些简单的canvas元素API 大家google一下即可,祝大家学习愉快:-D

原文链接:http://www.cnblogs.com/liubingblog/archive/2015/03/10/4325063.html

【编辑推荐】

  1. 微信开放JS SDK,再次给浏览器们上了一课
  2. AngularJS 是否能满足企业应用的安全需求
  3. 微信开放JS-SDK后 创业还需要开发App么?
  4. 什么时候 AngularJS 会超越JQuery
  5. Node.js开发指南:Node.js基础介绍
【责任编辑:wangxueyan TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

大师品软件——软件之痛与应对之道

这并不是一本传统的技术专著,因为它并没有包含一行代码,而更像是一部技术评论。作者通过幽默诙谐而又不失辛辣的语言,从程序员、用户等多...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊
× Python最火的编程语言