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;//后面减去八、加上10，修正中心
107               y=170*(Math.sin(Math.PI/6*n))+10;
108  c.beginPath(); 109               c.fillStyle="#000"; 110               c.font="24px 微软雅黑"; 111               //十、十一、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时制