今天的時間比較充裕，心血來潮，為大家分享一個html5的小例子，希望對剛學html5或是沒學html5正準備學的「童鞋們」展示一個小案例，希望對你們的學習有幫助！高手嘛！請跳過吧！
我試水了畫了一個時鐘，和MDN的例子略有一點不同。 I work it by myself！
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>Title</title>
</head><body onload="draw()">
<canvas id="canvas" width="300" height="300">
</canvas>
<script>
function init()
{
var ctx = document.getElementById('canvas').getContext('2d');
ctx.save();
ctx.clearRect(0,0,300,300);
ctx.translate(150,150);
ctx.lineWidth = 4;
ctx.strokeStyle = "#a77";
ctx.beginPath();
ctx.arc(0,0,100,0,Math.PI*2,true);
ctx.stroke();
ctx.rotate(-Math.PI/2);//minute mark ctx.save();for(var i = 0;i<60;i++){if(i%5 != 0){
ctx.beginPath();
ctx.moveTo(90,0);
ctx.lineTo(94,0);
ctx.stroke();
}
ctx.rotate(Math.PI/30); }
ctx.restore();//hour mark ctx.save();for(var i=1;i<=12;i++){
ctx.beginPath();
ctx.moveTo(85,0);
ctx.lineTo(95,0);
ctx.stroke();
ctx.rotate(Math.PI/6); }
ctx.restore();
window.requestAnimationFrame(clock);
}function clock() {var ctx = document.getElementById('canvas').getContext('2d');var now = new Date();var sec = now.getSeconds();var min = now.getMinutes();var hr = now.getHours();
hr = hr>=12 ? hr-12 : hr;
ctx.beginPath();
ctx.arc(0,0,82,0,Math.PI*2,false);
ctx.clip();
ctx.clearRect(-90,-90,180,180);//write hour ctx.save();
ctx.lineWidth = 6;
ctx.rotate(hr*Math.PI/6 + min*Math.PI/360 + sec*Math.PI/21600); ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(50,0);
ctx.stroke();
ctx.restore();//write minute ctx.save();
ctx.lineWidth = 3;
ctx.rotate(min*Math.PI/30 + sec*Math.PI/1800);
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(65,0);
ctx.stroke();
ctx.restore();//write second ctx.save();
ctx.lineWidth = 1;
ctx.rotate(sec*Math.PI/30); ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(80,0);
ctx.stroke();
ctx.restore();
window.requestAnimationFrame(clock);
}
init();
</script>
</body>
</html>#這裡給出MDN的例子頁：點我點我
和MDN的例子不同的是，MDN每次都要重繪整個時鐘，而我的做法則將時鐘錶盤和3個指針分離開來，只需重繪指針。
我覺得這裡有兩個困難：一個是計算時分針的角度（分針走的同時，時針也會走一些角度）。一個是重繪指針的區域。
canvasRendingContext2D.rotate(angle)
這裡Math.PI是半圓，半圓有6個小時，所以Math.PI /6是一個小時時針所走的弧度。
因為分針轉完一圈，時針就走完1/12圈，所以計算時針對於minute所走的弧度可以這麼計算：Math.PI*2/60*12 =>Math.PI /360
秒針同理。
第二，重繪指標。
若不重繪指針，1分鐘之後，你將得到滿是360度秒針的時鐘。像這樣：
那麼如何重繪指標部分的區域呢？
我想到了裁剪。然後在裁剪的區域重繪。
這樣就OK了！ （啦啦啦啦啦，手舞足蹈啦啦啦啦~~~）
以上是canvas畫動畫時鐘的實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
