js Canvas實(shí)現(xiàn)圓形時(shí)鐘教程
閱讀本文需要一點(diǎn)關(guān)于canvas基本用法的基礎(chǔ),本文實(shí)例為大家分享了HTML5 Canvas實(shí)現(xiàn)圓形時(shí)鐘簡(jiǎn)易教程
第一步:新建一個(gè)最簡(jiǎn)單的html文件,并且在<body>標(biāo)簽中定義元素canvas。
canvas.html
<html> <head> <title>Canvas clock tutorial</title> </head> <body> <canvas id="clock" width="400" height="400"></canvas> </body> </html>
在這一步完成后,用瀏覽器打開(kāi)canvas.html,你會(huì)發(fā)現(xiàn)什么都看不到,這是因?yàn)槲覀儧](méi)有在canvas上繪制任何東西,同時(shí)也沒(méi)有為其定義邊界。
在canvas .html中為<canvas>添加css樣式屬性:
<html> <head> <title>Canvas clock tutorial</title> <style type="text/css"> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="clock" width="400" height="400"></canvas> </body> </html>
這樣,我們就能看到<canvas>的輪廓。
當(dāng)沒(méi)有設(shè)置寬度和高度的時(shí)候,canvas會(huì)初始化寬度為300像素和高度為150像素。該元素可以使用CSS來(lái)定義大小,但在繪制時(shí)圖像會(huì)伸縮以適應(yīng)它的框架尺寸:如果CSS的尺寸與初始畫(huà)布的比例不一致,它會(huì)出現(xiàn)扭曲。
注意: 如果你繪制出來(lái)的圖像是扭曲的, 嘗試在<canvas>的屬性中明確規(guī)定寬和高,而不是使用CSS。
第二步:新建實(shí)現(xiàn)繪制圓形時(shí)鐘邏輯的draw.js文件,進(jìn)行初始化工作。
毫無(wú)疑問(wèn),要實(shí)現(xiàn)時(shí)鐘,就需要獲取系統(tǒng)時(shí)間。
在js語(yǔ)法中,可以利用Date()來(lái)實(shí)時(shí)獲取時(shí)間。
var currentTime = new Date();
隨后,要掌握的是canvas繪制圓形的函數(shù):
arc(x, y, radius, startAngle, endAngle, anticlockwise)該方法表示畫(huà)一個(gè)以(x,y)為圓心的、以radius為半徑的圓?。▓A),從startAngle開(kāi)始到endAngle結(jié)束,按照anticlockwise給定的方向(默認(rèn)順時(shí)針(true))來(lái)生成。
其中stratAngle和endAngle的單位并不是我們所熟悉的角度單位,而是弧度單位。一個(gè)完整的圓跨弧度2π。
在canvas的坐標(biāo)系中,是以x軸正方向所在的方向?yàn)?弧度。時(shí)鐘指針按順時(shí)針?lè)较蜣D(zhuǎn),以2π為一個(gè)周期,因此如下圖所示,時(shí)鐘指針,是從(-1/2)*π位置開(kāi)始走的。
當(dāng)前時(shí)間的弧度計(jì)算方式如下:
//將一個(gè)時(shí)鐘周期12等分,對(duì)12求余是因?yàn)镈ate().getHours將返回24小時(shí)制的小時(shí)。 hour = (currentTime.getHours() % 12 ) * (2 * Math.PI /12); //MINUTE 一圈60等分 minute = (currentTIme.getMinutes) * (2* Math.PI / 60); //SECOND 一圈60等分 second = (currentTime.getSeconds) * (2 * Math.PI / 60);
由于在canvas中時(shí)鐘圓從(-1/2)*π開(kāi)始走,因此我們還需要給它們加上(-1/2)*π的起始偏移量。
初步得到draw.js:
function draw() { //canvas繪畫(huà)的前提工作 var canvas = document.getElementById('clock'); var currentTime = new Date(); var hour = (currentTime.getHours()%12) * Math.PI/6; var minute = currentTime.getMinutes() * Math.PI/30; var second = currentTime.getSeconds() * Math.PI/30; hour = hour - Math.PI * (1/2); minute = minute - Math.PI * (1/2); second = second - Math.PI * (1/2); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(200,200,50,Math.PI*(-1/2),hour,false); ctx.moveTo(200,100); ctx.arc(200,200,100,Math.PI*(-1/2),minute,false); ctx.moveTo(200,50); ctx.arc(200,200,150,Math.PI*(-1/2),second,false); ctx.stroke(); } }
同時(shí)在canvas.html中 加入draw.js的引用。
<html> <head> <title>Canvas clock tutorial</title> <style type="text/css"> canvas { border: 1px solid black; } </style> <script src="draw.js" type="text/javascript"></script> </head> <body onload="draw();"> <canvas id="clock" width="400" height="400"></canvas> </body> </html>
在完成了第二步之后,我們可以看到一個(gè)當(dāng)前時(shí)間的圓形時(shí)鐘輪廓。那么接下來(lái),就是讓它動(dòng)起來(lái)!
第三步:使用requestAnimationFrame()方法讓時(shí)鐘動(dòng)起來(lái)。
requestAnimationFrame()的執(zhí)行頻率是1秒60幀,用戶(hù)可以在requestAnimationFrame定義事件,使其在每一幀中重復(fù)、迭代完成相應(yīng)的事件。
在我們這個(gè)案例中,每一幀里面requestAnimationFrame要做的事情很簡(jiǎn)單,為當(dāng)前時(shí)間的三個(gè)參數(shù)(時(shí)針、分針、秒針)添加增量,然后重新繪制時(shí)鐘。
根據(jù)一秒60幀的頻率,那么second在1幀里面的增量是:2*π / 60 / 60 = π / 1800;
minute在一幀里面的增量是second增量的60分之一;hour在一幀里面的增量是minute的12分之1。
另外:當(dāng)hour、minute、second任一一個(gè)變量到達(dá)3/2*π后,意味著完成了一個(gè)周期,就要重新初始化為(-1/2)*π,否則會(huì)覆蓋繪制成一個(gè)圓。
由此得到:requestAnimationFrame()函數(shù)中,hour,minute,second的更新過(guò)程如下:
var s = Math.PI / 1800; var m = s / 60; var h = m / 12; second = second + s; minute = minute + m; hour = hour + h; if(second >= Math.PI * (3/2)){ second = Math.PI * (-1/2); } if(minute >= Math.PI * (3/2)){ minute = Math.PI * (-1/2); } if(second >= Math.PI * (3/2)){ second = Math.PI * (-1/2); }</span>
更新draw.js的完整代碼如下:
function draw() { var canvas = document.getElementById('clock'); var currentTime = new Date(); var hour = (currentTime.getHours()%12) * Math.PI/6; var minute = currentTime.getMinutes() * Math.PI/30; var second = currentTime.getSeconds() * Math.PI/30; hour = hour - Math.PI * (1/2); minute = minute - Math.PI * (1/2); second = second - Math.PI * (1/2); if (canvas.getContext){ var ctx = canvas.getContext('2d'); var s = Math.PI / 1800; var m = s / 60; var h = m / 12; var rotate = requestAnimationFrame(step); function step(){ second = second + s; minute = minute + m; hour = hour + h; if(second >= Math.PI * (3/2)){ second = Math.PI * (-1/2); } if(minute >= Math.PI * (3/2)){ minute = Math.PI * (-1/2); } if(second >= Math.PI * (3/2)){ second = Math.PI * (-1/2); } ctx.clearRect(0, 0, 400 , 400); ctx.beginPath(); ctx.arc(200,200,50,Math.PI*(-1/2),hour,false); ctx.moveTo(200,100); ctx.arc(200,200,100,Math.PI*(-1/2),minute,false); ctx.moveTo(200,50); ctx.arc(200,200,150,Math.PI*(-1/2),second,false); ctx.stroke(); requestAnimationFrame(step); } } }
到這步為止,我們已經(jīng)得到了一個(gè)會(huì)動(dòng)的圓形時(shí)鐘,接下來(lái),我們?yōu)槠涮砑由现羔槨?nbsp;
第四步*:添加時(shí)針、分針、秒針。
JS為我們提供了Math.cos() 、Math.sin() 計(jì)算指針到達(dá)的位置,它們所接收參數(shù)的單位也都是弧度。
function draw() { var canvas = document.getElementById('clock'); var currentTime = new Date(); var hour = (currentTime.getHours()%12) * Math.PI/6; var minute = currentTime.getMinutes() * Math.PI/30; var second = currentTime.getSeconds() * Math.PI/30; hour = hour - Math.PI * (1/2); minute = minute - Math.PI * (1/2); second = second - Math.PI * (1/2); if (canvas.getContext){ var ctx = canvas.getContext('2d'); var s = Math.PI / 1800; var m = s / 60; var h = m / 12; var rotate = requestAnimationFrame(step); function step(){ second = second + s; minute = minute + m; hour = hour + h; if(second >= Math.PI * (3/2)){ second = Math.PI * (-1/2); } if(minute >= Math.PI * (3/2)){ minute = Math.PI * (-1/2); } if(second >= Math.PI * (3/2)){ second = Math.PI * (-1/2); } //秒針的終點(diǎn) xs = 150 * Math.cos(second) + 200; ys = 150 * Math.sin(second) + 200; //分針的終點(diǎn) xm = 100 * Math.cos(minute) + 200; ym = 100 * Math.sin(minute) + 200; //時(shí)針的終點(diǎn) xh = 50 * Math.cos(hour) + 200; yh = 50 * Math.sin(hour) + 200; ctx.clearRect(0, 0, 400 , 400); ctx.beginPath(); //繪制指針 ctx.moveTo(200,200); ctx.lineTo(xs,ys); ctx.moveTo(200,200); ctx.lineTo(xm,ym); ctx.moveTo(200,200); ctx.lineTo(xh,yh); //繪制圓形輪廓 ctx.moveTo(200,150); ctx.arc(200,200,50,Math.PI*(-1/2),hour,false); ctx.moveTo(200,100); ctx.arc(200,200,100,Math.PI*(-1/2),minute,false); ctx.moveTo(200,50); ctx.arc(200,200,150,Math.PI*(-1/2),second,false); ctx.stroke(); requestAnimationFrame(step); } } }
嗯嗯,雖然指針是畫(huà)出來(lái)了,都是我略感后悔,因?yàn)楦杏X(jué)太丑了。從審美學(xué)角度而言,帶指針時(shí)鐘就應(yīng)該是個(gè)全圓輪廓的時(shí)鐘。不知道讀者有沒(méi)有同感。我決定在第五步中把第四步回退了。
第五步:個(gè)性化、美化、自定義你的時(shí)鐘。
html5的canvas畫(huà)布,提供了多種樣式屬性,如線(xiàn)條顏色、線(xiàn)條粗細(xì)等等。
為了提高代碼的可重用性,我們將畫(huà)圓的代碼抽象成一個(gè)函數(shù)。
function draw() { var canvas = document.getElementById('clock'); var currentTime = new Date(); var hour = (currentTime.getHours()%12) * Math.PI/6; var minute = currentTime.getMinutes() * Math.PI/30; var second = currentTime.getSeconds() * Math.PI/30; hour = hour - Math.PI * (1/2); minute = minute - Math.PI * (1/2); second = second - Math.PI * (1/2); if (canvas.getContext){ var ctx = canvas.getContext('2d'); var s = Math.PI / 1800; var m = s / 60; var h = m / 12; var rotate = requestAnimationFrame(step); function step(){ second = second + s; minute = minute + m; hour = hour + h; if(second >= Math.PI * (3/2)){ second = Math.PI * (-1/2); } if(minute >= Math.PI * (3/2)){ minute = Math.PI * (-1/2); } if(second >= Math.PI * (3/2)){ second = Math.PI * (-1/2); } ctx.clearRect(0, 0, 400 , 400); ctx.beginPath(); //繪制圓形輪廓 drawCircle(ctx, 100, hour, '#99ff00'); drawCircle(ctx, 120, minute, '#99ff66'); drawCircle(ctx, 140, second, '#66cc66'); requestAnimationFrame(step); } } } function drawCircle(ctx, radius ,endAngle, color){ ctx.beginPath(); ctx.moveTo(200,200-radius); ctx.strokeStyle = color; ctx.lineWidth = 20; ctx.arc(200,200,radius,Math.PI*(-1/2),endAngle,false); ctx.stroke(); }
第六步(后續(xù)添加):為時(shí)鐘添加數(shù)字指數(shù)。
具體做法為多增加一個(gè)畫(huà)布canvas元素。既然我們已經(jīng)能從Date()中獲取時(shí)間,那么顯示數(shù)值的來(lái)源不成問(wèn)題。讀者唯一需要知道的就是利用setInterval(thingstodo(),interval)方法來(lái)實(shí)現(xiàn)每秒更新一次指數(shù)。
修改后的canvas.html
<html> <head> <title>Canvas clock tutorial</title> <style type="text/css"> canvas { border: 1px solid black; } #display {position: absolute; top:8; left:8;} </style> <script src="draw.js" type="text/javascript"></script> </head> <body onload="draw();"> <canvas id="clock" width="400" height="400"></canvas> <canvas id="display" width="400" height="400"></canvas> </body> </html>
修改后的draw.js
function draw() { var canvas = document.getElementById('clock'); var displayCanvas = document.getElementById('display'); var currentTime = new Date(); var hour = (currentTime.getHours()%12) * Math.PI/6; var minute = currentTime.getMinutes() * Math.PI/30; var second = currentTime.getSeconds() * Math.PI/30; hour = hour - Math.PI * (1/2); minute = minute - Math.PI * (1/2); second = second - Math.PI * (1/2); if (canvas.getContext){ var ctx = canvas.getContext('2d'); var ctxD = displayCanvas.getContext('2d'); showDisplay(ctxD, currentTime); var s = Math.PI / 1800; var m = s / 60; var h = m / 12; var rotate = requestAnimationFrame(step); function step(){ second = second + s; minute = minute + m; hour = hour + h; if(second >= Math.PI * (3/2)){ second = Math.PI * (-1/2); } if(minute >= Math.PI * (3/2)){ minute = Math.PI * (-1/2); } if(second >= Math.PI * (3/2)){ second = Math.PI * (-1/2); } ctx.clearRect(0, 0, 400 , 400); ctx.beginPath(); //繪制圓形輪廓 drawCircle(ctx, 100, hour, '#99ff00'); drawCircle(ctx, 120, minute, '#99ff66'); drawCircle(ctx, 140, second, '#66cc66'); requestAnimationFrame(step); } } } function drawCircle(ctx, radius ,endAngle, color){ ctx.beginPath(); ctx.moveTo(200,200-radius); ctx.strokeStyle = color; ctx.lineWidth = 20; ctx.arc(200,200,radius,Math.PI*(-1/2),endAngle,false); ctx.stroke(); } function showDisplay(ctx, date){ var h = date.getHours(),m = date.getMinutes(),s = date.getSeconds(); //計(jì)時(shí)文字樣式 ctx.font = "13px Sans-Serif"; ctx.textAlign = "center"; ctx.strokeText(h+":"+m+":"+s,200,200); var timmer = setInterval(function(){ s++; if(s>=60){ m++; s=0; } if(m>=60){ h++; m=0; } if(h>=24){ h=0; } ctx.clearRect(0,0,400,400); ctx.strokeText(h+":"+m+":"+s,200,200); },1000); }
最終成果圖如下:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- html5 canvas js(數(shù)字時(shí)鐘)實(shí)例代碼
- JS+Canvas繪制時(shí)鐘效果
- JS+Canvas繪制動(dòng)態(tài)時(shí)鐘效果
- javascript結(jié)合Canvas 實(shí)現(xiàn)簡(jiǎn)易的圓形時(shí)鐘
- js+html5實(shí)現(xiàn)canvas繪制網(wǎng)頁(yè)時(shí)鐘的方法
- JavaScript html5 canvas繪制時(shí)鐘效果
- JavaScript學(xué)習(xí)小結(jié)之使用canvas畫(huà)“哆啦A夢(mèng)”時(shí)鐘
- JS+H5 Canvas實(shí)現(xiàn)時(shí)鐘效果
- js Canvas繪制圓形時(shí)鐘效果
- JS+Canvas實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果
相關(guān)文章
[分享]一個(gè)非常漂亮的進(jìn)度滾動(dòng)條
[分享]一個(gè)非常漂亮的進(jìn)度滾動(dòng)條...2007-02-02微信小程序?qū)崿F(xiàn)通訊錄列表展開(kāi)收起
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)通訊錄列表展開(kāi)收起,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11Web層改進(jìn)II-用xmlhttp 無(wú)聲息提交復(fù)雜表單
Web層改進(jìn)II-用xmlhttp 無(wú)聲息提交復(fù)雜表單...2007-01-01js之encodeURI、encodeURIComponent、decodeURI、decodeURIComponent
這篇文章主要介紹了js之encodeURI、encodeURIComponent、decodeURI、decodeURIComponent的使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04簡(jiǎn)單js代碼實(shí)現(xiàn)selece二級(jí)聯(lián)動(dòng)(推薦)
這篇文章主要介紹了簡(jiǎn)單js代碼實(shí)現(xiàn)selece二級(jí)聯(lián)動(dòng)的簡(jiǎn)單實(shí)例。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02