<!DOCTYPEhtml><html><head></head><body><canvasid="clock"width="500"height="500"></canvas><script>varclock=document.getElementById("clock");varctx=clock.getContext("2d");functiondrawClock(){//清除画布ctx.clearRect(0,0,500,500);varnow=newDate();varsec=now.getSeconds();varmin=now.getMinutes();varhour=now.getHours();//小时必须获取浮点类型hour=hour+min/60;//将二十四小时进制转换为12小时进制if(hour>12){hour-=12;}//表盘ctx.lineWidth=10;ctx.strokeStyle="blue"ctx.beginPath();ctx.arc(250,250,200,0,360,false);ctx.closePath();ctx.stroke();//刻度时刻度for(vari=0;i<12;i++){ctx.save();ctx.lineWidth=7;ctx.strokeStyle="#000";ctx.translate(250,250);//设置旋转圆点ctx.rotate(i*30*Math.PI/180);//设置旋转角度:角度*Math.PI/180=弧度ctx.beginPath();ctx.moveTo(0,-170);ctx.lineTo(0,-190);ctx.closePath();ctx.stroke();ctx.restore();}//分刻度for(vari=0;i<60;i++){ctx.save();ctx.lineWidth=5;ctx.strokeStyle="#000";ctx.translate(250,250);ctx.rotate(i*6*Math.PI/180);ctx.beginPath();ctx.moveTo(0,-180);ctx.lineTo(0,-190);ctx.stroke();ctx.closePath();ctx.restore();}//时针ctx.save();ctx.lineWidth=7;ctx.strokeStyle="#000";ctx.translate(250,250);//设置异次元空间的0,0点ctx.rotate(hour*30*Math.PI/180);ctx.beginPath();ctx.moveTo(0,-140);ctx.lineTo(0,10);ctx.closePath();ctx.stroke();ctx.restore();//分针ctx.save();ctx.lineWidth=5;ctx.strokeStyle="#000";ctx.translate(250,250);//设置异次元空间的0,0点ctx.rotate(min*6*Math.PI/180);ctx.beginPath();ctx.moveTo(0,-160);ctx.lineTo(0,15);ctx.closePath();ctx.stroke();ctx.restore();//秒针ctx.save();ctx.lineWidth=3;ctx.strokeStyle="#F00";ctx.translate(250,250);//设置异次元空间的0,0点ctx.rotate(sec*6*Math.PI/180);ctx.beginPath();ctx.moveTo(0,-170);ctx.lineTo(0,20);ctx.closePath();ctx.stroke();ctx.beginPath();ctx.arc(0,0,5,0,360,false);ctx.closePath();ctx.fillStyle="grey";ctx.fill();ctx.stroke();ctx.beginPath();ctx.arc(0,-150,5,0,360,false);ctx.closePath();ctx.fillStyle="grey";ctx.fill();ctx.stroke();ctx.restore();}drawClock();setInterval(drawClock,1000);</script></body></html>