使用純HTML5編寫一款網頁上的時脈的程式碼分享_html5教學技巧

你需要知道的：

canvas標籤只是圖形容器，您必須使用腳本來繪製圖形。預設大小：寬300px，高150px;

getContext() 方法可傳回一個對象，該物件提供了用於在畫布上繪圖的方法和屬性。 ——取得上下文物件。
getContext("2d") 物件屬性和方法，可用於在畫布上繪製文字、線條、矩形、圓形等等。

fillRect(l,t,w,h)：預設顏色是黑色 strokeRect(l,t,w,h):有邊框的方塊。預設一像素黑色邊框

setInterval() 方法可依照指定的周期（以毫秒計）來呼叫函數或計算表達式。

beginPath()：定義開始繪製路徑, 它把目前的點設定為 (0,0)。 當一個畫布的環境第一次創建，beginPath()
方法會被明確地呼叫。
closePath()：結束繪製路徑（將起點與終點進行連接）

 繪製圓形：
arc（ x,y,半徑,起始弧度，結束弧度,旋轉方向）
x,y：起始位置
弧度與角度的關係：弧度=角度*Math.PI/180
旋轉方向：順時針（預設：false，逆時針：true）

代碼：

XML/HTML Code複製內容到剪貼簿

1. HTML>  
2. html lang=lang=lang
=
3. lang=>  
4. 頭>           元 
元
5.  字元 字元8">           
標題>>            
6. 腳本> 🎜>> 🎜>
>
7.                   window.onload = 函數
(){   
8.                         var                          var 
9.   
10.                            drawClock(){   
12.                                00;   //指定座標                                   00;   
13.                                0;  //指定鐘錶半徑      
                                oGC.clearRect(0,0,oC.width,oC.height);//清空透明度   
  
                               新
16.  Date();      //建立資料物件   
17.                                oDate.getHours();//取得時間                                   >oDate.getMinutes();   
18.                                >oDate.getSeconds();      
                            urs*30   oMin/2)*Math.PI/180; //設定時針的值   
19.                             in*6)*Math.PI/180;                                en*6)*Math.PI/180;   
  
                               
21.                                   🎜>;i
22. 60;i ){         //i為60，且代表時鐘的60個小刻度  
23.                                                                 )*Math.PI/180,false); //循環從6度到12度                                   }  
24.                                
                               
25.   
26.                                'white'
; //覆蓋住小刻度的黑色線  
27.                                                                                                  
  
                               
29.                                
  
                               🎜>3
31. ; //設定時鐘圓盤大刻度的粗細值  
32.                                
  
                            
34. ;i
35. 12;i ){              //i為12，且為時鐘刻度的12大格                                                                  1)*Math.PI/180,false); // 間隔為30度，弧度=角度*Math.PI/180   
36.                                 }  
37.                                
                               
38.   
39.                                'white'
; //覆蓋大刻度的黑色線  
40.                                                                                                 
  
                               
42.                                
  
                               >5
44. ;//設定時針寬度   
45.                                
                               
46.   
47.                              下  
48.                                                                                                   >3
;//設定分針寬度   
                            
50.                                
  
                                
                               
53.                                
  
                               >1
55. ;//設定秒針寬度   
56.                                                                                                  上 oGC.arc(x.
57.                                
                               
58.                         }   
59.                         setInterval(drawClock,1000);//設定定時器，並讓時鐘與時鐘設定
                               
60.                 };   
61.         script> 🎜>>
62.  🎜>>  head
>
63.    body
>
64.            canvas  width = "400px" "400px" "400px" >"400px">canvas> 
65. body>  
66. html>  

點選下方result查看示範：

http://jsfiddle.net/eh02450b/2/