canvas繪製動態電子錶
阿新 • • 發佈：2018-11-02
電子錶線上地址:點選開啟連結
電子時鐘截圖
動態電子錶實現思路
1.利用陣列繪製不規則圖形需要繪製的圖形有 0 1 2 3 4 5 6 7 8 9 :
要繪製的圖形陣列為[0,0,1,1,1,0,0],
[0,1,1,0,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,0,1,1,0],
[0,0,1,1,1,0,0],
故需要一個三維陣列,也即11個七列十行的二維陣列
2.藉助 canvas 繪製
2.1把三維數組裡面的1轉換為小圓點(arc)
2.2確立繪製圓點座標半徑.設小圓的半徑為R,這直徑為2R,每個小圓的邊距為1
則有一個數字所佔寬為7*(2R+2),高為10*(2R+2)
2.3時間格式為00:00:00,令R==4,讓每個數字之間距離為15,那麼畫布寬為8*100=800,高為100
2.4確定第一個圖形陣列內(i,j)的圓心座標為((2j+1)*(R+1),(2i+1)*(R+1))
第n個圖形的圓點座標為(100*index+x,y),x,y為上述圓心座標
2.5畫出圓形context.arc(100*index+(2j+1)*(R+1),(2i+1)*(R+1),R,2*Math.PI,false)
3.獲取時間
1.時間物件Date獲取當前時間,並通過正則取出每個數字
程式碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>電子時鐘</title> <style type="text/css"> body{margin:0;padding:0;} #canvas{display:block; margin:300px auto 0; } </style> </head> <body> <canvas id="canvas" width="800" height="100"></canvas> <script type="text/javascript"> var num= [ [ [0,0,1,1,1,0,0], [0,1,1,0,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,0,1,1,0], [0,0,1,1,1,0,0] ],//0 [ [0,0,0,1,1,0,0], [0,1,1,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [1,1,1,1,1,1,1] ],//1 [ [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,0,1,1,0,0,0], [0,1,1,0,0,0,0], [1,1,0,0,0,0,0], [1,1,0,0,0,1,1], [1,1,1,1,1,1,1] ],//2 [ [1,1,1,1,1,1,1], [0,0,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,0,1,1,1,0,0], [0,0,0,0,1,1,0], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0] ],//3 [ [0,0,0,0,1,1,0], [0,0,0,1,1,1,0], [0,0,1,1,1,1,0], [0,1,1,0,1,1,0], [1,1,0,0,1,1,0], [1,1,1,1,1,1,1], [0,0,0,0,1,1,0], [0,0,0,0,1,1,0], [0,0,0,0,1,1,0], [0,0,0,1,1,1,1] ],//4 [ [1,1,1,1,1,1,1], [1,1,0,0,0,0,0], [1,1,0,0,0,0,0], [1,1,1,1,1,1,0], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0] ],//5 [ [0,0,0,0,1,1,0], [0,0,1,1,0,0,0], [0,1,1,0,0,0,0], [1,1,0,0,0,0,0], [1,1,0,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0] ],//6 [ [1,1,1,1,1,1,1], [1,1,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,1,1,0,0,0], [0,0,1,1,0,0,0], [0,0,1,1,0,0,0], [0,0,1,1,0,0,0] ],//7 [ [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0] ],//8 [ [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,1,1,0,0,0,0] ],//9 [ [0,0,0,0,0,0,0], [0,0,1,1,1,0,0], [0,0,1,1,1,0,0], [0,0,1,1,1,0,0], [0,0,0,0,0,0,0], [0,0,0,0,0,0,0], [0,0,1,1,1,0,0], [0,0,1,1,1,0,0], [0,0,1,1,1,0,0], [0,0,0,0,0,0,0] ]//: ]; </script> <script type="text/javascript"> var draw=document.getElementById('canvas'); var context=draw.getContext('2d'); function drawNum(index,n){ for(var i=0;i<num[n].length;i++){ for(var j=0;j<num[n][i].length;j++){ if(num[n][i][j]=='1'){ context.beginPath(); context.fillStyle="#5c1414"; context.arc(index*100+j*2*(4+1)+(4+1),i*2*(4+1)+(4+1),4,2*Math.PI,false); context.closePath(); context.fill();//填充*/ } } } } function getTime(){ var temp=/(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date); var data=[]; data.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]); for(var i=0;i<data.length;i++){ drawNum(i,data[i]); } } getTime(); setInterval(function(){ context.clearRect(0,0,800,100); getTime(); },1000) </script> </body> </html>