小編給大家分享一下怎么用HTML5的canvas實(shí)現(xiàn)一個(gè)炫酷時(shí)鐘效果,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
成都創(chuàng)新互聯(lián)公司公司2013年成立,先為電白等服務(wù)建站,電白等地企業(yè),進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為電白企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
對(duì)于H5來(lái)說(shuō),canvas可以說(shuō)是它最有特色的一個(gè)地方了,有了它之后我們可以隨意的在網(wǎng)頁(yè)上畫各種各樣的圖形,做一些小游戲啊什么的。canvas這個(gè)標(biāo)簽的用法,在網(wǎng)上也有特別多的教程了,這里就不作介紹了。今天我們就用canvas來(lái)做一個(gè)小小的時(shí)鐘。
那么首先在這個(gè)頁(yè)面里面我使用了兩個(gè)canvas,一個(gè)用來(lái)繪制靜態(tài)的時(shí)鐘表盤和刻度,另一個(gè)用來(lái)繪制時(shí)鐘的三個(gè)指針,然后用定位讓他們重合到一起。然后這里沒什么好說(shuō)的,下面附上代碼。
JavaScript Code復(fù)制內(nèi)容到剪貼板
<canvas id="plate"> 畫表盤 </canvas> <canvas id="needles"> 畫時(shí)針 </canvas>
JavaScript Code復(fù)制內(nèi)容到剪貼板
var plate=document.getElementById('plate'); var needles=document.getElementById('needles'); needles.setAttribute('style','position:absolute;top:8px;left:8px;'); //這里因?yàn)閏hrome里面,body的magin值為8px,所以我這里就沒設(shè)為0了。 var cntP=plate.getContext('2d'); var cntH=needles.getContext('2d'); plate.width=800; plate.height=500; needles.width=800; needles.height=500;
到了這里準(zhǔn)備工作就做完了,下面就準(zhǔn)備繪制時(shí)鐘了。我先定義了一個(gè)繪制時(shí)鐘表盤的構(gòu)造函數(shù)。
JavaScript Code復(fù)制內(nèi)容到剪貼板
function drawclock(cnt,radius,platelen,linewidth,numLen,NUMLEN){ this.cnt=cnt; this.radius=radius; this.platelen=platelen; this.linewidth=linewidth; this.numLen=numLen; this.NUMLEN=NUMLEN; this.getCalibCoor=function(i){ //獲得表盤刻度兩端的坐標(biāo) var X=200+this.radius*Math.sin(6*i*Math.PI/180); var Y=200-this.radius*Math.cos(6*i*Math.PI/180); var x=200+(this.radius-this.platelen)*Math.sin(6*i*Math.PI/180); var y=200-(this.radius-this.platelen)*Math.cos(6*i*Math.PI/180); // 獲得分鐘數(shù)字的坐標(biāo) var numx=200+(this.radius-this.platelen-this.numLen)*Math.sin(6*i*Math.PI/180); var numy=200-(this.radius-this.platelen-this.numLen)*Math.cos(6*i*Math.PI/180); //獲得小時(shí)數(shù)字的坐標(biāo) var numX=200+(this.radius-this.platelen-this.NUMLEN)*Math.sin(6*i*Math.PI/180); var numY=200-(this.radius-this.platelen-this.NUMLEN)*Math.cos(6*i*Math.PI/180); return {X:X,Y:Y,x:x,y:y,numx:numx,numy:numy,numX:numX,numY:numY}; }; this.drawCalibration=function(){ //畫刻度 for(var i=0,coorObj;i<60;i++){ coorObj=this.getCalibCoor(i); this.cnt.beginPath(); this.cnt.moveTo(coorObj.X,coorObj.Y); this.cnt.lineTo(coorObj.x,coorObj.y); this.cnt.closePath(); this.cnt.lineWidth=this.linewidth; this.cnt.strokeStyle='#ddd'; i%5==0&&(this.cnt.strokeStyle='#aaa') &&(this.cnt.lineWidth=this.linewidth*2); i%15==0&&(this.cnt.strokeStyle='#999') &&(this.cnt.lineWidth=this.linewidth*3); this.cnt.stroke(); this.cnt.font='10px Arial'; this.cnt.fillStyle='rgba(0,0,0,.2)'; this.cnt.fillText(i,coorObj.numx-7,coorObj.numy+3); i%5==0&&(this.cnt.fillStyle='rgba(0,0,0,.5)') &&(this.cnt.font='18px Arial') &&(this.cnt.fillText(i/5,coorObj.numX-5,coorObj.numY+5)); } }; } var clock=new drawclock(cntP,200,5,1,10,25); //實(shí)例化一個(gè)表盤對(duì)象 clock.drawCalibration();
這里最重要的部分就應(yīng)該是獲得刻度和數(shù)字繪制的坐標(biāo)了。我把繪制刻度的起始點(diǎn)放在了表盤的邊緣上,然后從表盤的半徑上減去刻度的長(zhǎng)度,就可以得到刻度終點(diǎn)的位置,然后利用角度和三角函數(shù)得到兩個(gè)點(diǎn)的坐標(biāo)。最后就可以繪制出表盤的刻度了。下面繪制出表盤上的數(shù)字也是一樣的方法。我這里吧表盤的中心放在了(200,200)這里位置。到了這里我們就已經(jīng)繪制好了一個(gè)靜態(tài)的時(shí)鐘表盤。
下面我又定義了一個(gè)繪制時(shí)鐘指針的構(gòu)造函數(shù)。
JavaScript Code復(fù)制內(nèi)容到剪貼板
function clockNeedle(cnt,R,lineWidth,strokeStyle,lineCap,obj){ this.R=R; this.cnt=cnt; this.lineWidth=lineWidth; this.strokeStyle=strokeStyle; this.lineCap=lineCap; this.obj=obj; this.getNeedleCoor=function(i){ var X=200+this.R*0.8*Math.sin(i); //起點(diǎn)的坐標(biāo) var Y=200-this.R*0.8*Math.cos(i); var x=200-20*Math.sin(i); //終點(diǎn)的坐標(biāo) var y=200+20*Math.cos(i); return {X:X,Y:Y,x:x,y:y}; }; this.drawNeedle=function(){ var d=new Date().getTime(); var angle; switch(this.obj){ case 0: angle=(d/3600000%24+8)/12*360*Math.PI/180; break; case 1: angle=d/60000%60/60*360*Math.PI/180; break; case 2: angle=d/1000%60/60*360*Math.PI/180; break; } var coorobj=this.getNeedleCoor(angle); this.cnt.beginPath(); this.cnt.moveTo(coorobj.x,coorobj.y); this.cnt.lineTo(coorobj.X,coorobj.Y); // this.cnt.closePath(); this.cnt.lineWidth=this.lineWidth; this.cnt.strokeStyle=this.strokeStyle; this.cnt.lineCap=this.lineCap; this.cnt.stroke(); } }
這里有兩個(gè)地方需要說(shuō)一下:1、在我們獲得當(dāng)前時(shí)間的的毫秒數(shù),然后轉(zhuǎn)換為小時(shí)的時(shí)候,對(duì)24取模計(jì)算出當(dāng)天的小時(shí)數(shù)的時(shí)候,這里需要加上8。2、如果想要使用lineCap這個(gè)屬性嗎,那么上面在設(shè)置路徑的時(shí)候,不要用closePath()。
到了這里我們還需要一個(gè)來(lái)繪制指針的方法,并且讓指針看起來(lái)能夠轉(zhuǎn)動(dòng):
JavaScript Code復(fù)制內(nèi)容到剪貼板
function draw(){ cntH.clearRect(0,0,needles.width,needles.height); var mzneedle=new clockNeedle(cntH,200,1,'rgba(0,0,0,.5)','round',2); //最后一個(gè)參數(shù)0代表畫時(shí)針,1畫分針,2畫秒針 var fzneedle=new clockNeedle(cntH,80,3,'rgba(0,0,0,.4)','round',0); var szneedle=new clockNeedle(cntH,140,2,'rgba(0,0,0,.3)','round',1); mzneedle.drawNeedle(); fzneedle.drawNeedle(); szneedle.drawNeedle(); cntH.arc(200,200,5,0,2*Math.PI); cntH.fillStyle='rgba(0,0,0,.5)'; cntH.fill(); } setInterval(draw,1);
下面附上該時(shí)鐘的圖片:
以上是“怎么用HTML5的canvas實(shí)現(xiàn)一個(gè)炫酷時(shí)鐘效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)頁(yè)名稱:怎么用HTML5的canvas實(shí)現(xiàn)一個(gè)炫酷時(shí)鐘效果
鏈接分享:http://bm7419.com/article16/jdcjdg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)公司、App設(shè)計(jì)、ChatGPT、App開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)