canvas 實現時鐘
lCanvas繪製鐘錶
繪製鐘錶
3.1.1.效果
功能實現
l繪製錶盤
// 1 繪製錶盤
cxt.beginPath();
cxt.arc(250,250,r,0,Math.PI*2);
cxt.closePath();
cxt.fillStyle='white';
cxt.fill();
cxt.strokeStyle='steelblue';
cxt.lineWidth=20
cxt.stroke();
l繪製刻度
// 2 繪製刻度
// 2-1時針刻度
for(var i=0; i<12;i++){
getLine(Math.PI/180*i*30,-190,-170,'black',5);
}
// 2-2分針刻度
for(var i=0; i<60;i++){
getLine(Math.PI/180*i*6,-190,-180,'black',3);
}
// 定義生成刻度方法
function getLine(rotate,moveTo,lineTo,color,width){
cxt.save();
cxt.translate(250,250);
cxt.rotate(rotate)
cxt.beginPath();
cxt.moveTo(0,moveTo);
cxt.lineTo(0,lineTo);
cxt.closePath();
cxt.strokeStyle=color;
cxt.lineWidth=width;
cxt.stroke();
cxt.restore();
}
l計算文字座標
順時針公式:
Y = Math.sin(弧度)*r;
X =Math.cos(弧度)*r
逆時針公式:
Y = Math.cos(弧度)*r;
X =Math.sin(弧度)*r
// 3 繪製文字
// 順時針公式:
// Y = Math.sin(弧度)*r;
// X =Math.cos(弧度)*r
let text = [3,4,5,6,7,8,9,10,11,12,1,2]
for(var i=0;i<12;i++){
// 計算文字的座標
let x = Math.cos(Math.PI/180*i*30)*r*0.7+250;
let y = Math.sin(Math.PI/180*i*30)*r*0.7+250;
cxt.font='20px 楷體';
cxt.fillStyle='black';
cxt.textAlign='center';
cxt.textBaseline='middle'
cxt.fillText(text[i],x,y);
}
l繪製中間空心圓
// 4 繪製中心空心圓
cxt.beginPath();
cxt.arc(250,250,15,0,Math.PI*2);
cxt.closePath();
cxt.strokeStyle='black';
cxt.lineWidth=1
cxt.stroke();
l繪製小時
// 5 繪製指標
let time = new Date();
let h = time.getHours();
let m = time.getMinutes();
let s = time.getSeconds();
// h =
getLine(Math.PI/180*h*30,-120,30,'steelblue',10);
getLine(Math.PI/180*m*6,-130,20,'orange',5);
getLine(Math.PI/180*s*6,-155,10,'red',3);
l 繪製中間實心圓
// 6 繪製中心實心圓
cxt.beginPath();
cxt.arc(250,250,5,0,Math.PI*2);
cxt.closePath();
cxt.fillStyle='black';
cxt.fill();
附上原始碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <canvas id="canvas" width="500" height="500"></canvas> <style type="text/css"> canvas{ background-color: #DDD; } </style> </head> <script type="text/javascript"> let canvas = document.getElementById('canvas'); if(canvas.getContext('2d')){ let cxt = canvas.getContext('2d'); setInterval(()=>{ getTime(); },1000) function getTime(){ let r = 200; // 繪製錶盤 cxt.beginPath(); cxt.arc(250,250,r,0,Math.PI*2); cxt.closePath(); cxt.fillStyle='white'; cxt.fill(); cxt.strokeStyle='steelblue'; cxt.lineWidth=20 cxt.stroke(); // 2 繪製刻度 // 2-1時針刻度 for(var i=0; i<12;i++){ getLine(Math.PI/180*i*30,-190,-170,'black',5); } // 2-2分針刻度 for(var i=0; i<60;i++){ getLine(Math.PI/180*i*6,-190,-180,'black',3); } // 3 繪製文字 // 順時針公式: // Y = Math.sin(弧度)*r; // X =Math.cos(弧度)*r let text = [3,4,5,6,7,8,9,10,11,12,1,2] for(var i=0;i<12;i++){ // 計算文字的座標 let x = Math.cos(Math.PI/180*i*30)*r*0.7+250; let y = Math.sin(Math.PI/180*i*30)*r*0.7+250; cxt.font='20px 楷體'; cxt.fillStyle='black'; cxt.textAlign='center'; cxt.textBaseline='middle' cxt.fillText(text[i],x,y); } // 4 繪製中心空心圓 cxt.beginPath(); cxt.arc(250,250,15,0,Math.PI*2); cxt.closePath(); cxt.strokeStyle='black'; cxt.lineWidth=1 cxt.stroke(); // 5 繪製指標 let time = new Date(); let h = time.getHours(); let m = time.getMinutes(); let s = time.getSeconds(); // 改成十二小時制 h = h > 12 ? (h-12) + m/60 : h + m/60; getLine(Math.PI/180*h*30,-120,30,'steelblue',10); getLine(Math.PI/180*m*6,-130,20,'orange',5); getLine(Math.PI/180*s*6,-155,10,'red',3); // 6 繪製中心實心圓 cxt.beginPath(); cxt.arc(250,250,5,0,Math.PI*2); cxt.closePath(); cxt.fillStyle='black'; cxt.fill(); // 定義生成刻度方法 function getLine(rotate,moveTo,lineTo,color,width){ cxt.save(); cxt.translate(250,250); cxt.rotate(rotate) cxt.beginPath(); cxt.moveTo(0,moveTo); cxt.lineTo(0,lineTo); cxt.closePath(); cxt.strokeStyle=color; cxt.lineWidth=width; cxt.stroke(); cxt.restore(); } } } // 繪製錶盤 </script> <body> </body> </html>