canvas之动态时钟
1 <script>
2 function showTime(){
3 var can=document.getElementById("canvas");
4 var c=can.getContext("2d");//定义2D画布
5 can.width="1000";
6 can.height="600";
7 //平移确定中心
8 c.translate(500,300);
9 //获取本地时间
10 var sum=new Date();
11 var sh=sum.getHours();
12 var sm=sum.getMinutes();
13 var se=sum.getSeconds();
14 sh=sh>=12?sh-12:sh;
15 //时针
16 c.save();
17 c.rotate(sh*(Math.PI/6)+sm*(Math.PI/6/60)+se*(Math.PI/6/60/60));//转成时针的弧度
18 c.moveTo(0,30);
19 c.lineTo(0,-115);
20 c.lineWidth=15;
21 c.lineCap="round";
22 c.stroke();
23 c.restore();
24 //分针
25 c.save();//防止互相干扰
26 c.rotate(sm*(Math.PI/6/5)+se*(Math.PI/6/5/60));
27 c.moveTo(0,35);
28 c.lineTo(0,-135);
29 c.lineWidth=12;
30 c.lineCap="round";
31 c.stroke();
32 c.restore();
33
34 //秒针
35 c.beginPath();
36 c.fillStyle="#f00";
37 c.arc(0,0,15,0,2*Math.PI);
38 c.fill();
39
40 c.save();
41 c.rotate(se*(Math.PI/30));
42 c.beginPath();
43 c.strokeStyle="#f00";
44 c.lineWidth=5;
45 c.moveTo(0,45);
46 c.lineTo(0,-140);
47 c.stroke();
48 c.restore();
49
50 //秒间隔的点
51 //(1)虚线画法,遇到跟随顺势针旋转问题，分别测试将时、分、秒旋转方向改为反向，发现改分针时，
出现跟随的方向也反转，确定是受分针转动影响.
52 c.save();
53 c.beginPath();
54 c.arc(0,0,200,0,2*Math.PI);
55 c.setLineDash([5,2*Math.PI*200/60-5]);//周长除以60减去线粗5
56 c.lineDashOffset="2.5";//修正线粗带来的偏差
57 c.lineWidth=5;
58 c.lineCap="butt";
59 c.strokeStyle="#000";
60 c.stroke();
61 c.restore();
62 //时点
63 c.save();
64 c.beginPath();
65 c.arc(0,0,195,0,2*Math.PI);
66 c.setLineDash([8, 195*2*Math.PI/12-8]);
67 c.lineDashOffset="4";
68 c.strokeStyle="blue";
69 c.lineWidth=20;
70 c.stroke();
71 c.restore();
72 //间隔点(2)循环画法，效果基本一样
73 /*//秒刻度
74 c.save()
75 for(var i=0;i<60;i++){
76 c.beginPath()
77 if(i%5!=0){
78 c.moveTo(0,-205);
79 c.lineTo(0,-200);
80 c.lineWidth="5";
81 c.stroke()
82 }
83 c.rotate(6*Math.PI/180)
84 }
85 c.restore()
86 //小时刻度
87 c.save()
88 for(var i=0;i<12;i++){
89 c.beginPath();
90 c.rotate(30*Math.PI/180);
91 c.moveTo(0,-205);
92 c.lineTo(0,-190);
93 c.lineWidth=8;
94 c.strokeStyle="blue";
95 c.stroke()
96 }
97 c.restore()*/
98
99 //时钟数字
100 var x;
101 var y;
102 var n=-1;
103 var array=[3,4,5,6,7,8,9,10,11,12,1,2];
104 for(var m=0;m<12;m++){
105 n+=1;
106 x=170*(Math.cos(Math.PI/6*n))-8;//后面减去8、加上10，修正中心
107 y=170*(Math.sin(Math.PI/6*n))+10;
108 c.beginPath();
109 c.fillStyle="#000";
110 c.font="24px 微软雅黑";
111 //10、11、12占两位需修正不对齐中心问题，这里只修正12，n==9
112 if(n==9){
113 x=x-5;
114 }
115 c.fillText(array[m],x,y);
116 }
117 //加个钟盘样式好看点
118 c.beginPath();
119 c.arc(0,0,220,0,2*Math.PI);
120 c.strokeStyle="#325fa2";
121 c.lineWidth=10;
122 c.stroke();
123 }
124 showTime();
125 setInterval(showTime,1000);
126 </script>
(代码规范性有待加强)
涉及或补充相关的点：
1.beginPath()、save()、restore()合理使用，避免上下干扰。
每次使用stroke()时，它都会把之前设置的状态再绘制一遍，strokeStyle属性会被覆盖。beginPath()是绘制设置状态的起始点，在beginPath()后面设置的绘制状态的作用域结束于绘制方法stroke()、fill()或者closePath()处。为了让绘制方法不重复绘制，可以在每次绘制之前加上beginPath()。
2.画虚线方法：setLineDash([8, 195*2*Math.PI/12-8])；lineDashOffset 属性设置起始偏移量
第一个参数要画的线长，第二个参数是间隔距离
3.间隔算法：
小时间隔刻度：2*Math.PI/60
秒间隔刻度：小时间隔/5
4.数字填充方法：fillText(array[m],x,y)；
在这里不能再使用rotate旋转，数字的方向都是向上而不是向着圆心，所以用文本填充fillText("要填充内容",x,y )，x,y为起始坐标。
5.获取本地当前时间：new Date() ……
所获取时间都转换成各个指针的角度，又因为获取的小时是24时制，所以加上一个判断 sh=sh>=12?sh-12:sh转为12时制
