关于canvas的API操作详情请阅读文档https://www.runoob.com/html/html5-canvas.html
先来看下效果图:
首先,需要绘制两个圆形作为表盘
var drawing=document.getElementById("drawing"); var context=drawing.getContext("2d"); context.beginPath(); //绘制外圆 context.arc(100,100,99,0,2*Math.PI,false); //绘制内圆 context.moveTo(194,100); context.arc(100,100,94,0,2*Math.PI,false);
然后,为表盘添加“指针”(时针,分针,秒针)
//绘制秒针 context.moveTo(100,100); context.lineTo(100,15); //绘制分针 context.moveTo(100,100); context.lineTo(35,100); //绘制时针 context.moveTo(100,100); context.lineTo(100,45); //描边路径 context.stroke();
最后,为表盘添加时间刻度
将时间刻度封装在一个 hous 方法中
function hous(x,y,r,h,context){ var gen3=Math.sqrt(3); var rs=0.5*r; switch(h) { case 1: context.fillText("1",x+rs,y-rs*gen3); break; case 2: context.fillText("2",x+gen3*rs,y-rs); break; case 3: context.fillText("3",x+2*rs,y); break; case 4: context.fillText("4",x+gen3*rs,y+rs); break; case 5: context.fillText("5",x+rs,y+gen3*rs); break; case 6: context.fillText("6",x,y+2*rs); break; case 7: context.fillText("7",x-rs,y+gen3*rs); break; case 8: context.fillText("8",x-gen3*rs,y+rs); break; case 9: context.fillText("9",x-2*rs,y); break; case 10: context.fillText("10",x-gen3*rs,y-rs); break; case 11: context.fillText("11",x-rs,y-gen3*rs); break; case 12: context.fillText("12",x,y-2*rs); break; default: alert("请输入正确的时间刻度!"); } }然后调用
context.font="bold 14px Arial"; context.textAlign="center"; context.textBaseline="midden"; for(var i=1;i<13;i++){ hous(100,105,85,i,context); }
网页显示效果: