使用canvas繪制時(shí)鐘

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

　　常用的API

? ? ?這篇博文，我將通過html5中的canvas元素繪制一個(gè)走動(dòng)的時(shí)鐘。

　　html代碼如下：

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

　　其中id這個(gè)屬性是必須要添加的，因?yàn)楹竺嬖贘avaScript腳本中，我們會(huì)通過它來獲得這個(gè)元素。 注意到width和height都是沒有單位的，默認(rèn)為px。 且<canvas>元素是沒有內(nèi)容的，當(dāng)然，也可以寫一些內(nèi)容，對于不支持canvas標(biāo)簽的瀏覽器來說，它會(huì)顯示其中的內(nèi)容，而對于支持canvas標(biāo)簽的瀏覽器而言，其中的內(nèi)容會(huì)被自動(dòng)忽略。故其效果和<noscript>標(biāo)簽是一樣的。我們還可以通過style屬性來為canvas畫布添加一個(gè)邊框，這樣就可以直接在頁面中看到效果了。

　　注意：canvas元素默認(rèn)是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;//得到將要畫的時(shí)鐘的半徑var prop=width/150;//在此保留比例，以便于在更換畫布大小時(shí)調(diào)節(jié)function outline(){clock.save();//保存當(dāng)前狀態(tài)clock.translate(r,r);//將原點(diǎn)移動(dòng)到(r,r)處clock.beginPath();//每個(gè)函數(shù)內(nèi)部都要有beginPath()方法clock.lineWidth=3*prop;//通過lineWidth來設(shè)置劃線的寬度，注意這里沒有單位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來設(shè)置字體的大小。關(guān)鍵：一定單位px，且后面一定要有字體樣式clock.textAlign="center";//設(shè)置位水平居中clock.textBaseline="middle";//設(shè)置位垂直居中 scaleNumbers.forEach(function(number,i){//遍歷數(shù)組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();//恢復(fù)}function minutes(minute){clock.save();clock.beginPath();clock.strokeStyle="orange";//設(shè)置路徑的顏色clock.lineWidth=4*prop;clock.lineCap="round";//設(shè)置線的樣式var rad=2*Math.PI/60*minute;clock.rotate(rad);//旋轉(zhuǎn)畫布clock.moveTo(0,5*prop);//將“畫筆”移動(dòng)到（這里沒有繪畫）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對象獲取時(shí)間var hour=now.getHours();//獲取當(dāng)前小時(shí)數(shù)var minute=now.getMinutes();var second=now.getSeconds();hours(hour,minute);minutes(minute);seconds(second);clock.restore();}all();setInterval(all,1000);//使用定時(shí)器不斷更新時(shí)間};

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

　　

轉(zhuǎn)載于:https://www.cnblogs.com/zhuzhenwei918/p/6058768.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的使用canvas绘制时钟的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。