canvas动态时钟

利用canvas可以绘制一些复杂的效果动画，这里展示了如何绘制一个动态的时钟，主要运用canvas的坐标变换、坐标状态的保存和恢复。思路来自《HTML5基础开发教程》范立峰，感谢给我知识的学校图书馆和本书作者。

效果是这样的：

参考代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="utf-8">
 5     <title>clock</title>
 6     <script type="text/javascript">
 7 
 8         var slen = 70, mlen = 65, hlen = 45,    //指针长度
 9             swidth = 2, mwidth = 3, hwidth = 4, //指针宽度
10             s = 0, m = 0, h = 0;                //时分秒数
11 
12         function draw(){
13             var canvas = document.getElementById("canvas");
14             var context = canvas.getContext("2d");
15             
16             context.beginPath();
17             context.arc(200,150,4,0,Math.PI*2,true);    //画表盘中心
18             context.fill();   //画实心的
19             context.closePath();
20             
21             context.beginPath();  
22             context.arc(200,150,100,0,Math.PI*2,true);  //画表盘外围
23             context.stroke();  //画空心的
24             context.closePath();
25             
26             context.beginPath();                        //画刻度
27             context.translate(200,150);                 //平移到圆心
28             context.rotate(-Math.PI/2);                 //逆时针旋转至12点
29             context.save();
30             for (var i = 0 ; i < 60; i++) {
31                 if (i%5 == 0){
32                     context.fillRect(80,0,20,5); //整点刻度线
33                 }else{
34                     context.fillRect(90,0,10,2); //分钟刻度线
35                 }
36                 context.rotate(Math.PI/30);
37             }
38             context.closePath();
39 
40             setInterval(refresh,1000,context);  //每一秒刷新一次 IE不支持带参数
41         }
42 
43         function refresh(context){
44             //var canvas = document.getElementById("canvas");  //IE下方式
45             //var context = canvas.getContext("2d");
46             context.restore();
47             context.save();
48             context.rotate(s*Math.PI/30);     //擦秒针
49             context.clearRect(5,-1,slen+1,swidth+2);
50 
51             context.restore();
52             context.save();
53             context.rotate(m*Math.PI/30);     //擦分针
54             context.clearRect(5,-1,mlen+1,mwidth+2); 
55 
56             context.restore();
57             context.save();
58             context.rotate(h*Math.PI/6);      //擦时针
59             context.clearRect(5,-1,hlen+1,hwidth+2);
60 
61             var time = new Date();            //获取时间
62             s = time.getSeconds();
63             m = time.getMinutes();
64             h = time.getHours();
65 
66             context.restore();
67             context.save();
68             context.rotate(s*Math.PI/30);    //画秒针
69             context.fillRect(5,0,slen,swidth);
70 
71             context.restore();
72             context.save();
73             context.rotate(m*Math.PI/30);    //画分针
74             context.fillRect(5,0,mlen,mwidth);
75 
76             context.restore();
77             context.save();
78             context.rotate(h*Math.PI/6);     //画时针
79             context.fillRect(5,0,hlen,hwidth);
80 
81         }
82     </script>
83 <head>
84 <body onload="draw()">
85 <fieldset>
86     <legend>clock</legend>
87     <canvas id="canvas" width="400px" height="300px"></canvas>
88 </fieldset>
89 </body>
90 </html>

涉及到的canvas用法可参考我的《canvas绘画常用方法》http://www.cnblogs.com/feitan/p/5137325.html

需要补充提到的是save()和restore()两个方法。save()将当前坐标设置（而不是画布呈现的效果）保存到栈中，每调用restore()时，保存坐标状态的栈顶取出最后一次save()的状态，恢复到当前坐标状态上。代码中，总是以圆心为坐标起点，以x水平线指向12点位置的状态为原始状态，每重画指针时就把当前状态恢复到原始状态，并再save为了下次再使用。

canvas动态时钟

推荐阅读