使用canvas繪制時鐘

使用canvas繪制時鐘

　 ?什么使canvas呢？HTML5 <canvas> 元素用于圖形的繪制，通過腳本 (通常是JavaScript)來完成。<canvas> 標簽只是圖形容器，所以我們必須使用腳本來繪制圖形。通過它可以繪制路徑,盒、圓、字符以及添加圖像等等。

　　常用的API

? ? ?這篇博文，我將通過html5中的canvas元素繪制一個走動的時鐘。

　　html代碼如下：

		<canvas id="clock" width="200" height="200" style="border:1px solid #ff0000;"></canvas>

　　其中id這個屬性是必須要添加的，因為后面在JavaScript腳本中，我們會通過它來獲得這個元素。 注意到width和height都是沒有單位的，默認為px。 且<canvas>元素是沒有內容的，當然，也可以寫一些內容，對于不支持canvas標簽的瀏覽器來說，它會顯示其中的內容，而對于支持canvas標簽的瀏覽器而言，其中的內容會被自動忽略。故其效果和<noscript>標簽是一樣的。我們還可以通過style屬性來為canvas畫布添加一個邊框，這樣就可以直接在頁面中看到效果了。

　　注意：canvas元素默認是inline。

　　JavaScript代碼如下：

window.οnlοad=function(){var clock=document.getElementById("clock").getContext('2d');//通過獲取canvas元素獲取2d上下文var width=clock.canvas.width;//得到畫布的寬度var height=clock.canvas.height;//得到花布的高度var r=width/2;//得到將要畫的時鐘的半徑var prop=width/150;//在此保留比例，以便于在更換畫布大小時調節function outline(){clock.save();//保存當前狀態clock.translate(r,r);//將原點移動到(r,r)處clock.beginPath();//每個函數內部都要有beginPath()方法clock.lineWidth=3*prop;//通過lineWidth來設置劃線的寬度，注意這里沒有單位clock.arc(0,0,r-clock.lineWidth/2,0,2*Math.PI,false);clock.stroke();//繪制路徑var scaleNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];clock.font=12*prop+"px Arial";//通過font來設置字體的大小。關鍵：一定單位px，且后面一定要有字體樣式clock.textAlign="center";//設置位水平居中clock.textBaseline="middle";//設置位垂直居中	scaleNumbers.forEach(function(number,i){//遍歷數組var rad=2*Math.PI/12*i;var x=Math.cos(rad)*(r-15*prop);var y=Math.sin(rad)*(r-15*prop);clock.fillText(number,x,y);//在x y處繪制number});for(var i=0;i<=60;i++){var rad=2*Math.PI/60*i;var x=Math.cos(rad)*(r-7*prop);var y=Math.sin(rad)*(r-7*prop);clock.beginPath();if(i%5===0){clock.fillStyle="red";//填充的顏色clock.arc(x,y,1*prop,0,2*Math.PI,false);}else{clock.fillStyle="black";clock.arc(x,y,1*prop,0,2*Math.PI,false);}clock.fill();}}function hours(hour,minute){clock.save();//一定要先保存clock.beginPath();var rad=2*Math.PI/12*hour;var minute_rad=2*Math.PI/12/60*minute;clock.rotate(rad+minute_rad);clock.strokeStyle="blue";clock.lineCap="round";clock.lineWidth=5*prop;clock.moveTo(0,2*prop);clock.lineTo(0,-r+40*prop);clock.stroke();clock.restore();//恢復}function minutes(minute){clock.save();clock.beginPath();clock.strokeStyle="orange";//設置路徑的顏色clock.lineWidth=4*prop;clock.lineCap="round";//設置線的樣式var rad=2*Math.PI/60*minute;clock.rotate(rad);//旋轉畫布clock.moveTo(0,5*prop);//將“畫筆”移動到（這里沒有繪畫）clock.lineTo(0,-r+25*prop);clock.stroke();clock.restore();}function seconds(second){clock.save();clock.beginPath();clock.fillStyle="red";var rad=2*Math.PI/60*second;clock.rotate(rad);clock.moveTo(-2*prop,5*prop);clock.lineTo(2*prop,5*prop);clock.lineTo(1*prop,-r+18*prop);clock.lineTo(3*prop,-r+18*prop);clock.lineTo(0,-r+10*prop);clock.lineTo(-3*prop,-r+18*prop);clock.lineTo(-1*prop,-r+18*prop);clock.fill();clock.restore();}function middle_dot(){clock.beginPath();clock.fillStyle="white";clock.arc(0,0,5*prop,0,2*Math.PI,false);clock.fill();}function all(){clock.clearRect(0,0,width,height);outline();middle_dot();var now=new Date();//通過Date對象獲取時間var hour=now.getHours();//獲取當前小時數var minute=now.getMinutes();var second=now.getSeconds();hours(hour,minute);minutes(minute);seconds(second);clock.restore();}all();setInterval(all,1000);//使用定時器不斷更新時間};

　　這樣，一個canvas繪制的時鐘就完成了。看看最后的效果圖吧：