以下代码可供参考。
<body>
<canvas id="mc" width="300px" height="300px"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("mc");
var ctx=canvas.getContext('2d');/*获取画笔*/
var x=canvas.width/2;
var y=(canvas.height/2);/*圆心*/
ctx.beginPath();
ctx.arc(x,y,150,0,2*Math.PI);/*0到360度*/ /*画了一个圆*/
ctx.stroke();
/*分钟刻度*/
var angle=(2*Math.PI/60);/*360°/60=6°*/
for(var i=0;i<60;i++){/*画60个刻度*/
var star=i*angle;
var end=(i+1)*angle;
ctx.beginPath();/*开始路径*/
ctx.moveTo(x,y);
ctx.arc(x,y,150,star,end);
ctx.stroke();
}
/*遮罩*/
ctx.beginPath();
ctx.strokeStyle='white';
ctx.arc(x,y,140,0,2*Math.PI);/*0到360度*/ /*画了一个圆*/
ctx.fillStyle='white';/*背景色为白色*/
ctx.fill();
ctx.stroke();
/*时钟刻度*/
var angle=(2*Math.PI/12);/*360/12*/
for(var i=0;i<12;i++){/*画60个刻度*/
var star=i*angle;
var end=(i+1)*angle;
ctx.beginPath();/*开始路径*/
ctx.strokeStyle='black';
ctx.moveTo(x,y);
ctx.arc(x,y,150,star,end);
ctx.stroke();
}
function time1(){
/*遮罩*/
ctx.beginPath();
ctx.strokeStyle='white';
ctx.arc(x,y,130,0,2*Math.PI);/*0到360度*/ /*画了一个圆*/
ctx.fillStyle='white';/*背景色为白色*/
ctx.fill();
ctx.stroke();
/**/
var date=new Date();
var h=date.getHours();
var m=date.getMinutes();
var s=date.getSeconds();
if(h>12){
h=h-12;
}
console.log(h);
var secondAngle =((s*6-90)*(Math.PI)/180) ; //计算出来秒针的弧度
var minuteAngle =((m*6-90)*(Math.PI)/180+(secondAngle/60)); //计算出来分针的弧度
var hourAngle =((h*30-90)*(Math.PI)/180 +(minuteAngle/12)); //计算出来时针的弧度
/*秒针*/
ctx.beginPath();
ctx.strokeStyle='red';
ctx.moveTo(x, y);
ctx.arc(x, y, 120, secondAngle, secondAngle);
ctx.stroke();
/*分针*/
ctx.beginPath();
ctx.strokeStyle='blue';
ctx.moveTo(x, y);
ctx.arc(x, y, 90, minuteAngle, minuteAngle);
ctx.stroke();
/*时针*/
ctx.beginPath();
ctx.strokeStyle='black';
ctx.moveTo(x, y);
ctx.arc(x, y,60, hourAngle, hourAngle);
ctx.stroke();
//画中心圆点
ctx.beginPath();
ctx.strokeStyle='black';
ctx.arc(x, y, 10, 0, 2 * Math.PI);
ctx.fillStyle = 'black';
ctx.fill();
ctx.stroke();
}
time1();
setInterval(time1,1000);
</script>
</body>