demo演示：
用到的一些繪制方法說明：
context.translate(x,y)方法，重新設置畫布的坐標源點，設置后，x,y坐標處為變為起始坐標(0,0);
context.arc(圓心x坐標, 圓心Y坐標, 圓半徑, 起始弧度,結束點弧度, 是否順時針) 方法繪制圓形，或者圓弧;
context.rotate(弧度) 方法接受一個弧度制參數，旋轉畫布，然后繪制圖形，相當於給繪制的圖形旋轉一個角度；
context.save() 和 context.restore() 方法，記錄起始狀態和回復狀態
context.fillRect(矩形左上角X坐標，Y坐標，寬度，高度): 繪制矩形
context.fillText(text,左上角x坐標，Y坐標): 繪制文字
修改：調整了下數字的顯示，最開始用Math.cos\Math.sin計算出來的值總是不對，就偷懶用旋轉的方式來畫的數字，這樣顯示出來文字是旋轉的
最后發現原來是Math.cos\Math.sin接受的是弧度制為單位，我最開始傳成角度制了，查了資料才發現時這個原因，改了就對了：
數字坐標計算方法：
知道了半徑，知道了角度，用三角函數的公式就能計算出相應的位置。
// 繪制表盤文字 for(i = 0;i<12;i++){ // 360度分為12段，每段30度 angle = i * 30; // 轉換為弧度制,Math.sin、Math.cos都接受弧度制單位 angle = angle*Math.PI/180;; // 0度角是3點，所以需要轉換一下數字 font = (i + 3 > 12)?i+3-12 : i+3; // 計算X坐標 fontX = Math.round(Math.cos(angle)*(r-30)); // 計算Y坐標 fontY = Math.round(Math.sin(angle)*(r-30)); // 設置文字樣式 context.font = 'bold 14px 微軟雅黑'; // 繪制文字 context.fillText(font+'',fontX,fontY); }
canvas 動畫就是不斷清除重繪的過程
角度弧度制轉換，高中課本上有，都忘得差不多了，如下：
弧度制單位：rad 角度制單位：度 → 180度 = PI弧度 → 1度 = PI弧度/180度 → 1弧度= 180度/PI弧度
得出角度轉換公式 ↓↓↓↓↓
弧度 = 角度*PI/180
角度 = 弧度*180/PI
代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas繪制時鍾</title> </head> <body> <canvas id="graph" width="500px" height="500">你的瀏覽器不支持canvas</canvas> <script type="text/javascript"> var canvas = document.getElementById('graph'); var context = canvas.getContext('2d'); var r = canvas.width/2.5; //半徑 //將坐標中心作為起啟點 context.translate(canvas.width / 2, canvas.height / 2); function drawCircle() { context.beginPath(); context.lineWidth = 5; context.strokeStyle = "#000"; context.arc(0, 0, r, 0, Math.PI * 2, true); context.stroke(); context.closePath(); } function drawClockScale() { var rad = 0, angle, font, fontX, fontY; context.fillStyle = '#000'; // 繪制表盤時刻度 for (var i = 0; i < 12; i++) { context.save(); rad = i * Math.PI / 6; // 弧度制，大刻度，總共分為12刻度，每刻度為：2π/12 → π/6 context.rotate(rad); // 旋轉畫布繪制刻度 context.fillRect(r - 10, 0, 10, 5); context.restore(); } // 繪制表盤分刻度 for (i = 0; i < 60; i++) { context.save(); // 記錄旋轉畫布之前初始狀態 rad = i*Math.PI/30; context.rotate(rad); // 旋轉畫布繪制刻度 context.fillRect(r - 10, 0, 5, 2); //繪制 context.restore(); // 恢復初始狀態，未旋轉前 } // 繪制表盤文字 for(i = 0;i<12;i++){ angle = i * 30; // 轉換為弧度制,Math.sin、Math.cos都接受弧度制單位 angle = angle*Math.PI/180;; font = (i + 3 > 12)?i+3-12 : i+3; fontX = Math.round(Math.cos(angle)*(r-30)); fontY = Math.round(Math.sin(angle)*(r-30)); context.font = 'bold 14px 微軟雅黑'; context.fillText(font+'',fontX,fontY); } } function drawHand(rotate,width,height){ context.save(); rotate = rotate*Math.PI/180; // 轉換為弧度制 context.rotate(rotate); context.fillRect(-10,0,width,height); context.restore(); } function setTime(){ var hour = new Date().getHours(); var minute = new Date().getMinutes(); var second = new Date().getSeconds(); //console.log(hour + ':' + minute + ':' + second); var hourRotate,minRotate,secRotate; // 計算秒針角度並繪制圖形 secRotate = second*6-90; drawHand(secRotate,r-30,2); // 計算分針角度並繪制圖形 minRotate = (minute*60 + second)*0.1 - 90; drawHand(minRotate,r-50,4); // 計算時針角度並繪制圖形 hourRotate = (hour*60*60 + minute*60 + second)/120 - 90; drawHand(hourRotate,r-70,5); } setInterval(function(){ context.clearRect(-canvas.width / 2,-canvas.height / 2,canvas.width,canvas.height); drawCircle(); drawClockScale(); setTime(); },1000); </script> </body> </html>