关于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);
}
网页显示效果: