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時制