通過html5 canvas繪制時鐘
最近一直在學習html5，學到了html5的canvas標簽，這個畫布真的是很強大，它有對應的javascript的api的支持，你可以在這個標簽里面繪制任意的圖形，你也可以把圖片放在里面，能夠做出很炫的效果。
言歸正傳，廢話不多說，首先，html，只一句設置畫布的id，寬度和高度
<canvas id="myCanvas" width="200" height="200" ></canvas>
下面就javascript，不多說什么了，都是基本的語法，很容易明白的，里面的主要地方也有解釋：
注：
1.stroke()方法繪制當前路徑的邊框。路徑定義的幾何線條產生了，但線條的可視化取決于 strokeStyle、lineWidth、lineJoin、lineCap 和 miterLimit 等屬性。
2.save() 方法把當前狀態的一份拷貝壓入到一個保存圖像狀態的棧中。這就允許您臨時地改變圖像狀態，然后，通過調用 restore() 來恢復以前的值
3.translate() 方法為畫布的變換矩陣添加水平的和垂直的偏移。參數 dx 和 dy 添加給后續定義路徑中的所有點。
4.scale() 方法為畫布的當前變換矩陣添加一個縮放變換。縮放通過獨立的水平和垂直縮放因子來完成。例如，傳遞一個值 2.0 和 0.5 將會導致繪圖路徑寬度變為原來的兩倍，而高度變為原來的 1/2。指定一個負的 sx 值，會導致 X 坐標沿 Y 軸對折，而指定一個負的 sy 會導致 Y 坐標沿著 X 軸對折。
5.rotate() 方法通過指定一個角度，改變了畫布坐標和 Web 瀏覽器中的 <Canvas> 元素的像素之間的映射，使得任意后續繪圖在畫布中都顯示為旋轉的。它并沒有旋轉 <Canvas> 元素本身。注意，這個角度是用弧度指定的。
window.onload=function(){
clock();
setInterval(clock,1000);///每一秒鐘重新繪制一次
};
function clock(){
///得到時分秒
var now=new Date();
var sec=now.getSeconds(),min=now.getMinutes(),hour=now.getHours();
hour=hour>=12?hour-12:hour;
var c=document.getElementById("myCanvas").getContext("2d");
c.save();
c.clearRect(0,0,150,150); ///初始化畫布
c.translate(75,75);
c.scale(0.4,0.4);
c.rotate(-Math.PI/2);
c.strokeStyle="black";
c.fillStyle="black";
c.lineWidth=8;
c.lineCap="round";
c.save();
c.beginPath();
for(var i=0;i<12;i++){///小時刻度
c.rotate(Math.PI/6);
c.moveTo(100,0);
c.lineTo(120,0);
}
c.stroke();
c.restore();
c.save();
c.lineWidth=5;
c.beginPath();
for(var i=0;i<60;i++){///分鐘刻度
if(i%5!=0){
c.moveTo(117,0);
c.lineTo(120,0);
}
c.rotate(Math.PI/30);
}
c.stroke();
c.restore();
c.save();
c.rotate((Math.PI/6)*hour+(Math.PI/360)*min+(Math.PI/21600)*sec);///畫上時針
c.lineWidth=14;
c.beginPath();
c.moveTo(-20,0);
c.lineTo(75,0);
c.stroke();
c.restore();
c.save();
c.rotate((Math.PI/30)*min+(Math.PI/1800)*sec);///分針
c.strokeStyle="#29A8DE";
c.lineWith=10;
c.beginPath();
c.moveTo(-28,0);
c.lineTo(102,0);
c.stroke();
c.restore();
c.save();
c.rotate(sec*Math.PI/30);///秒針
c.strokeStyle="#D40000";
c.lineWidth=6;
c.beginPath();
c.moveTo(-30,0);
c.lineTo(83,0);
c.stroke();
c.restore();
c.save();
///表框
c.lineWidth=14;
c.strokeStyle="#325FA2";
c.beginPath();
c.arc(0,0,142,0,Math.PI*2,true);
c.stroke();
c.restore();
c.restore();
}
最后截張圖看看效果：
