canvas绘制时钟表盘

关于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);
 }

网页显示效果：