在見識了html5中canvas的強大，筆者准備制作一個簡易時鍾。
下面就是成果啦，制作之前我們先分析一下，繪制一個時鍾需要做哪些准備。
一 、
1.首先這個時鍾分為表盤，指針（時針，分針，秒針）和數字三部分。
2.表盤是個圓，這個簡單。
3.繪制指針時，需要先獲取到系統時間，然后找到時間和角度的關系。
4.然后利用畫圓函數，把起始和終點設為同一角度，即可畫出以圓心為起點的射線（指針）了。
二、
接下來，我們再分析一下，繪制時鍾需要用到的函數。
1.arc(x, y, r, start, stop)
x, y, r : 分別是圓的圓心坐標和半徑。
start：起始角，以弧度計
stop : 結束角， 以弧度計
這里涉及到弧度的問題。角度和弧度的關系式：指針的角度 * Math.PI / 180 = 弧度。
三、
現在就剩下如何利用獲取到的系統時間轉化為 函數所需要的角度（弧度）了。
時鍾一圈分為12個小時，60分鍾，60秒。所以30°一小時，6°一分鍾， 6°一秒。
理所應當的 指針的角度 = 時間 * 對應的角度 即可得到我們所需的時間，但是我們這個計算方式是以0°在時鍾的12點鍾為基准的。
而canvas里的0°的地方是在時鍾的三點鍾方向。（一定要注意這個問題）。
而且以右為X軸，以下為Y軸的正方向。
所以還需要減去一個90 才是我們需要的結果
指針的角度 = 時間 * 對應的角度 - 90
另外 為了模擬真實的時針的走動（即分針走一分鍾，時針也跟着走一點點，而不是走完60分鍾時針才走一格），
只需要在計算時針角度的時候加上分鍾的一半（60/2=30，剛好是時針一格的度數）。
四、上代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id="can"> 當前瀏覽器不支持！ </canvas> <script> var x1 = 300; var y1 = 300; //時鍾圓心位置 var c = document.getElementById("can"); var ca = can.getContext("2d"); c.width = 400; c.height = 400; //畫布大小 setInterval(function() { ca.clearRect(0, 0, 400, 400); rtime(x1, y1); },50) //讓時鍾走起來 function rtime(x, y) { var da1 = new Date(); var h = parseInt(da1.getHours()); var m = parseInt(da1.getMinutes()); var s = parseInt(da1.getSeconds()); //獲取系統時間 var h1 = (h * 30 - 90 + m / 2) * Math.PI / 180; var m1 = (m * 6 - 90) * Math.PI / 180; var s1 = (s * 6 - 90) * Math.PI / 180; //轉化為函數所需要的弧度 ca.beginPath(); ca.lineWidth = 6; ca.arc(x, y, 70, 0, 2*Math.PI); ca.stroke(); //繪制表盤 ca.lineWidth = 1; ca.font = "18px"; ca.strokeText("12",x-9, y-50); ca.strokeText("6",x-3, y+60); ca.strokeText("9",x-60, y+5); ca.strokeText("3",x+55, y+5); //繪制數字 ca.beginPath(); ca.lineWidth = 3; ca.lineCap="round"; ca.moveTo(x,y); ca.arc(x, y, 35, h1, h1); ca.stroke(); //繪制時針 ca.beginPath(); ca.lineWidth = 2; ca.lineCap="round"; ca.moveTo(x,y); ca.arc(x, y, 45, m1, m1); ca.stroke(); //繪制分針 ca.beginPath(); ca.lineWidth = 1; ca.lineCap="round"; ca.moveTo(x,y); ca.arc(x, y, 55, s1, s1); ca.stroke(); //繪制秒針 } </script> </body> </html>
以上就是用canvas繪制時鍾的所有內容啦，有興趣的朋友們，可以在此基礎上繪制出各種各樣的時鍾啦。