效果图：
<html>
<head></head><body>
<canvas id="canvas1"height="500px"width="500px">您的浏览器不支持canvas标签。</canvas>
<script>
var c=document.getElementById("canvas1");
var clock=c.getContext("2d");
function drawclock(){
//清除画布，每画一次就要清除上一次的
clock.clearRect(0,0,500,500);
var now=new Date();
var sec=now.getSeconds();
var min=now.getMinutes();
var hour=now.getHours();
//小时必须获取浮点类型（小时+分钟转换成的小时）
hour=hour+min/60;
//获取的时间为24小时的（），需要转换为12小时的（小时）
hour=hour>12?hour-12:hour;//hour是否大于12，如果大于则hour=hour-12否则hour=hour。
//表盘
clock.lineWidth=10;
clock.strokeStyle="#41216e";
clock.beginPath();
clock.arc(250,250,100,0,360,false);
clock.closePath();
clock.stroke();
//时刻度,12个，所以用for循环来画
for(var i=0;i<12;i++){
clock.save();
clock.lineWidth=6;
clock.strokeStyle="#6f3a81";
//先设置（0，0）点
clock.translate(250,250);
//再设置旋转角度
clock.rotate(i*30*Math.PI/180);
clock.beginPath();
clock.moveTo(0,-93);
clock.lineTo(0,-80);
clock.stroke();
clock.closePath();
clock.restore();
}
//分刻度
for(var j=0;j<60;j++){
clock.save();
clock.lineWidth=4;
clock.strokeStyle="#6f3a81";
clock.translate(250,250);
clock.rotate(j*6*Math.PI/180);
clock.beginPath();
clock.moveTo(0,-93);
clock.lineTo(0,-85);
clock.stroke();
clock.closePath();
clock.restore();
}
//时针
clock.save();
clock.lineWidth=6;
clock.strokeStyle="#170523";
clock.translate(250,250);
clock.rotate(hour*30*Math.PI/180);
clock.beginPath();
clock.moveTo(0,-40);
clock.lineTo(0,10);
clock.lineCap="round";
clock.closePath();
clock.stroke();
clock.restore();
//分针
clock.save();
clock.lineWidth=4;
clock.strokeStyle="#170523";
clock.translate(250,250);
clock.rotate(min*6*Math.PI/180);
clock.beginPath();
clock.moveTo(0,-58);
clock.lineTo(0,15);
clock.closePath();
clock.stroke();
clock.restore();
//秒针
clock.save();
clock.lineWidth=2;
clock.strokeStyle="#c582ba";
clock.translate(250,250);
clock.rotate(sec*6*Math.PI/180);
clock.beginPath();
clock.moveTo(-70,0);
clock.lineTo(16,0);
clock.stroke();
clock.closePath();
//画出时针，分针，秒针的交叉点
clock.beginPath();
clock.fillStyle="black";
clock.arc(0,0,5,0,360);
clock.arc(-60,0,2.5,0,360);
clock.fill();
clock.closePath();
clock.stroke();
clock.restore();
}
//使用setInterval一秒钟调用一次
setInterval(drawclock,1000);
</body>
</script>
</html>
时间： 2024-08-28 16:45:35