直接上代码，老实人，不忽悠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01</title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
<script type="text/javascript">
var canvas=document.getElementById('canvas');
var cxt=canvas.getContext('2d');
function drawClock() {
//清除画布
cxt.clearRect(0,0,500,500);
var now=new Date();
var sec=now.getSeconds();
var min=now.getMinutes();
var hour=now.getHours();
//小时转换为浮点类型
hour+=min/60;
//分钟转化为浮点类型
min+=sec/60;
//将24小时进制转化为12小时
hour=hour>12?hour-12:hour;
//表盘
cxt.lineWidth=10;
cxt.strokeStyle='blue';
cxt.beginPath();
cxt.arc(250,250,200,0,360,false);
cxt.closePath();
cxt.stroke();
//刻度
for(var i=0;i<12;i++){
cxt.save();
//设置时针的颜色
cxt.lineWidth=7;
cxt.strokeStyle='#000';
//先设置00点
cxt.translate(250,250);
//设置旋转角度
cxt.rotate(i*30*Math.PI/180); //弧度
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//时刻度
for(var i=0;i<60;i++){
cxt.save();
cxt.lineWidth=5;
cxt.strokeStyle='#000';
cxt.translate(250,250);
//设置旋转角度
cxt.rotate(i*6*Math.PI/180);
//画分钟刻度
cxt.beginPath();
cxt.moveTo(0,-180);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//时针
cxt.save();
cxt.lineWidth=7;
cxt.strokeStyle='#000';
//设置00点
cxt.translate(250,250);
//设置旋转角度
cxt.rotate(hour*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-140);
cxt.lineTo(0,10);
cxt.closePath();
cxt.stroke();
cxt.restore();
//分针
cxt.save();
cxt.lineWidth=5;
cxt.strokeStyle='#000';
//设置00点
cxt.translate(250,250);
//设置旋转角度
cxt.rotate(min*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-160);
cxt.lineTo(0,15);
cxt.closePath();
cxt.stroke();
cxt.restore();
//秒针
cxt.save();
cxt.lineWidth=3;
cxt.strokeStyle='red';
//设置00点
cxt.translate(250,250);
//设置旋转角度
cxt.rotate(sec*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,20);
cxt.closePath();
cxt.stroke();
//画小圆点
cxt.beginPath();
cxt.arc(0,0,5,0,360,false);
cxt.closePath();
//设置填充
cxt.fillStyle='gray';
cxt.fill();
cxt.stroke();
//秒针小圆点
cxt.beginPath();
cxt.arc(0,-150,5,0,360,false);
cxt.closePath();
cxt.fillStyle='gray';
cxt.fill();
cxt.stroke();
cxt.restore();
}
//使用定时器
setInterval(drawClock,1000);
</script>