Canva繪製時鐘

通過一定的資料學習，瞭解到Canvas畫布的強大，決定回想一下能都將時鐘這一功能實現。

在繪製畫布時，一般的步驟爲：清空畫布、改變畫布狀態（translate）、重新繪製圖形、回到原始。

先給一下最後的畫布圖像是：

該開始時，決定設置一下瀏覽器背景顏色，這裏就引用老師的源代碼，相對來說大氣點。

<span style="white-space:pre">	</span>body{
<span style="white-space:pre">	</span>background:
<span style="white-space:pre">	</span>linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,
<span style="white-space:pre">	</span>linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),
<span style="white-space:pre">	</span>linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 15<span style="white-space:pre">	</span>8px);
<span style="white-space:pre">	</span>background-color:#e1ebbd;
<span style="white-space:pre">	</span>background-size: 128px 128px;}

在着手使用Canvas時，要添加JavaScript代碼。初始設定時鐘、分鐘、秒鐘長度，通過方法調用繪出一張畫布。

        var c = document.getElementById("myCs");
        var cxt = c.getContext("2d");
        var ss = 60, mm = 50, hh = 40;

分別在畫布當中繪出時鐘的圓心以及外圓。

		//藍色圓心
        cxt.beginPath();
        cxt.strokeStyle = "#00f";
        cxt.fillStyle = "#00f";             // 填充顏色
        cxt.arc(100,150,5,0,2*Math.PI,true);    //鐘錶的圓心
        cxt.fill();                         //繪製鐘錶圓心
        cxt.closePath();
		//藍色鍾外圓
        cxt.beginPath();
        cxt.strokeStyle="#00f";
        cxt.arc(100,150,100,0,2*Math.PI,true);  //鐘錶的大圓
        cxt.stroke();
        cxt.closePath();

接下來的是要繪製出時鐘外圓的刻度，以便顯示正確的時間刻度。

<span style="white-space:pre">	</span>cxt.beginPath();
        cxt.translate(100,150);         //平移原點
        cxt.rotate(-Math.PI/2);
        cxt.save();
        for (var i =0;i<60;i++){
            if (i%5 ==0){
                cxt.fillRect(80,0,20,5);
                cxt.fillText(""+(i/5 ==0?12:i/5),70,0);
            }else{
                cxt.fillRect(90,0,10,2);
            }
            cxt.rotate(Math.PI/30);         //旋轉圖形
        }
        cxt.closePath();

得到一個有刻度的時鐘框。

接下來，也就是定義一個動畫繪畫函數。在這個函數之前我們得先了解繪圖API提供了save和restore這兩個方法來保存和回覆狀態。這裏爲了方便以後瞭解這個兩個方法之間的套用，我用了一個例子來記錄。

        var c = document.getElementById("myCs");
        var ctx = c.getContext("2d");
        //設置填充色爲藍色並保存
		ctx.fillStyle = "#00f";
		ctx.save();
		//設置填充爲紅色
		ctx.fillStyle = "#f00";
		//繪畫出一個圓
		ctx.beginPath();
		ctx.arc(100,100,15,0,Math.PI*2,true);
		ctx.fill();
		//調用恢復方法繪製一個矩形
		ctx.restore();
		ctx.beginPath();
		ctx.rect(0,0,50,50);
		ctx.fill();

  首先保存了藍色爲填充色，再設置畫布填充色屬性爲紅色，從而進行畫圓。restore調用畫布屬性藍色進行畫矩形。這個就很好的理解了兩個方法的配套使用。

瞭解了畫布的這倆個方法後，就可以進行秒針、分針、時針的繪畫了。這裏定義一個刷新畫布函數Update。

        var ls = 0,lm = 0,lh =0;
        function Update(){
			//清空秒針
            cxt.restore();
            cxt.save();
            cxt.rotate(ls*Math.PI/30);
            cxt.clearRect(5,-1,ss+1,2+2);
			//清空分針
            cxt.restore();
            cxt.save();
            cxt.rotate(lm*Math.PI/30);
            cxt.clearRect(5,-1,mm+1,3+2);
			//清空時針，開始畫新的時針
            cxt.restore();
            cxt.save();
            cxt.rotate(lh*Math.PI/6);
            cxt.clearRect(5,-3,hh+1,4+2);
			//獲取網絡時間
            var time = new Date();
            var s = ls = time.getSeconds();
            var m = lm = time.getMinutes();
            var h = lh = time.getHours();
			//開始畫新的秒針
            cxt.restore();
            cxt.save();
            cxt.rotate(s*Math.PI/30);
            cxt.fillRect(5,0,ss,2);
			//開始畫新的分針
            cxt.restore();
            cxt.save();
            cxt.rotate(m*Math.PI/30);
            cxt.fillRect(5,0,mm,3);
			//，開始畫新的時針
            cxt.restore();
            cxt.save();
            cxt.rotate(h*Math.PI/6);
            cxt.fillRect(5,-2,hh,4);
        }

也就是成功進行畫布的Update，最後調用setInterval對象進行畫布頻率爲1的更新。

        var MyInterval = setInterval("Update();",1000);

最終得到我們需要的頁面時鐘。

總得來說，這個還是比較簡單的，我都是自己看書，不斷學習與累積吧！質量不是很高，但是這也花了我好長時間去完善着文章，就當是鼓勵自己咯！