html5制作一个时钟

试着用html5写一个时钟

记得开始这个随笔是几天前，一直保存在草稿里面，一直感觉有个东西搁在在那里，所以今天熬夜也要写完这篇博客！！！哈哈...不多说来上代码和思路。

---------------------------------------------------------------------------------------------

其实并不难，主要看你是否掌握了canvas下面几个属性:save(),restore();ratate();translate(),moveTo(),lineTo();beginPath();requestAnimationFrame()；在开始看下面的代码的时候最好先弄清楚这些方法的原理和作用，另外canvas有个重要特性:canvas是基于状态的绘制，所以每次旋转都是接着上次旋转的基础上继续旋转，所以在使用图形变换的时候必须搭配save()与restore()方法.

好了，开始代码，先开始画12个小时和60分钟的线条(一些需要步骤在代码有注释):

 1        function rotateFun(){
 2              var now= new Date();//获取当前时间对象，对以后指针旋转很重要
 3 
 4       var ctx=document.getElementById("canvas").getContext("2d");//取的画布环境
 5 
 6       ctx.clearRect(0,0,800,600);//在开始之前都要清空画布，因为不清空就会所有的痕迹在画布上显示
 7 
 8       ctx.save();//第一个保存状态
 9       ctx.fillStyle='rgba(20,20,20,0.2)';
10       ctx.fillRect(0,0,800,600);
11       ctx.translate(400,300);//平移画布中心到中心 
12       
13       //画12个小时
14       ctx.save();
15       for (var i = 0; i < 12; i++) {
16         ctx.strokeStyle='black';
17         ctx.rotate(2*Math.PI/12);
18         ctx.moveTo(120,0);
19         ctx.lineTo(100,0);
20         ctx.lineWidth=8;
21         ctx.stroke();
22       }
23       ctx.restore(); 
24 
25       //画60个分钟
26       ctx.save();
27       for (var i = 0; i <60 ;i++) {
28         ctx.strokeStyle='black';
29         ctx.rotate(2*Math.PI/60);
30         ctx.moveTo(115,0);
31         ctx.lineTo(105,0);
32         ctx.lineWidth=2;
33         ctx.stroke();
34       }
35       ctx.restore();
36      
37       ctx.restore()
38     
39        }

-----------------------------------------------------------------------

静态完了就是动态的，指针随着时间而走动.这里指针走的原理是：每一帧调用后都是重新画的一个画布，里面的指针，12个小时和60分钟的线条都是新的，只是下一秒后就物是人非，整个画布就转了某个角度，但是指针相对画布还是静止没有变过的，所以我们的眼睛就会产生了指针随着时间走的效果，另外就是指针指在当前时间都是参数控制的，代买如下:

            var hour=now.getHours();
      var min=now.getMinutes();
      var sec=now.getSeconds();

      //画秒针
      ctx.save();
      ctx.beginPath();
      ctx.rotate(sec*Math.PI/30);
      ctx.strokeStyle='black';
      ctx.lineWidth=4;
      ctx.moveTo(0,30);
      ctx.lineTo(0,-112);
      ctx.stroke();
      ctx.closePath();
      ctx.restore();

      //画分钟
      ctx.save();
      ctx.beginPath();
      ctx.rotate(min*Math.PI/30+sec*Math.PI/1800);
      ctx.strokeStyle='black';
      ctx.lineWidth=6;
      ctx.moveTo(0,28);
      ctx.lineTo(0,-83);
      ctx.stroke();
      ctx.closePath();
      ctx.restore();

      //画时钟
      ctx.save();
      ctx.beginPath();
      ctx.rotate(hour*Math.PI/6+min*Math.PI/360+sec*Math.PI/21600);
      ctx.strokeStyle='black';
      ctx.lineWidth=8;
      ctx.moveTo(0,26);
      ctx.lineTo(0,-63);
      ctx.stroke();
      ctx.closePath();
      ctx.beginPath();
      ctx.strokeStyle='blue';
      ctx.arc(0,0,126,0,2*Math.PI);
      ctx.stroke();
      ctx.closePath();
      ctx.restore();
      ctx.restore();

------------------------------------------------------------

好了，知道了这些原理：给出完整的代码,这些代码还有优化改进的地方：

 1                    <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>rotate</title>
 6 </head>
 7 <body>
 8 <canvas id='canvas' width="800" height="600"></canvas>
 9 <script> 
10    function rotateFun(){
11       var now= new Date();//获取当前时间对象，对以后指针旋转很重要
12 
13       var ctx=document.getElementById("canvas").getContext("2d");//取的画布环境
14 
15       ctx.clearRect(0,0,800,600);//在开始之前都要清空画布，因为不清空就会所有的痕迹在画布上显示
16 
17       ctx.save();//第一个保存状态
18       ctx.fillStyle='rgba(20,20,20,0.2)';
19       ctx.fillRect(0,0,800,600);
20       ctx.translate(400,300);//平移画布中心到中心 
21       
22       //画12个小时
23       ctx.save();
24       for (var i = 0; i < 12; i++) {
25         ctx.strokeStyle='black';
26         ctx.rotate(2*Math.PI/12);
27         ctx.moveTo(120,0);
28         ctx.lineTo(100,0);
29         ctx.lineWidth=8;
30         ctx.stroke();
31       }
32       ctx.restore(); 
33 
34       //画60个分钟
35       ctx.save();
36       for (var i = 0; i <60 ;i++) {
37         ctx.strokeStyle='black';
38         ctx.rotate(2*Math.PI/60);
39         ctx.moveTo(115,0);
40         ctx.lineTo(105,0);
41         ctx.lineWidth=2;
42         ctx.stroke();
43       }
44       ctx.restore();
45       
46       var hour=now.getHours();
47       var min=now.getMinutes();
48       var sec=now.getSeconds();
49 
50       //画秒针
51       ctx.save();
52       ctx.beginPath();
53       ctx.rotate(sec*Math.PI/30);
54       ctx.strokeStyle='black';
55       ctx.lineWidth=4;
56       ctx.moveTo(0,30);
57       ctx.lineTo(0,-112);
58       ctx.stroke();
59       ctx.closePath();
60       ctx.restore();
61 
62       //画分钟
63       ctx.save();
64       ctx.beginPath();
65       ctx.rotate(min*Math.PI/30+sec*Math.PI/1800);
66       ctx.strokeStyle='black';
67       ctx.lineWidth=6;
68       ctx.moveTo(0,28);
69       ctx.lineTo(0,-83);
70       ctx.stroke();
71       ctx.closePath();
72       ctx.restore();
73 
74       //画时钟
75       ctx.save();
76       ctx.beginPath();
77       ctx.rotate(hour*Math.PI/6+min*Math.PI/360+sec*Math.PI/21600);
78       ctx.strokeStyle='black';
79       ctx.lineWidth=8;
80       ctx.moveTo(0,26);
81       ctx.lineTo(0,-63);
82       ctx.stroke();
83       ctx.closePath();
84       ctx.beginPath();
85       ctx.strokeStyle='blue';
86       ctx.arc(0,0,126,0,2*Math.PI);
87       ctx.stroke();
88       ctx.closePath();
89       ctx.restore();
90       ctx.restore();
91 
92       window.requestAnimationFrame(rotateFun);
93    }
94 
95    rotateFun();
96 </script>
97 </body>
98 </html>

00:45:50