canvas 实现时钟
l Canvas绘制钟表
绘制钟表
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(); } } }else{ console.log('请更换浏览器') } </script> <body> </body> </html>
