效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas clock</title>
</head>
<body>
<canvas id="clock" width="500" height="500">您的浏览器不支持canvas标签</canvas> <script type="text/javascript">
var canvas = document.getElementById('clock');
var clock = canvas.getContext('2d');
var r = canvas.width/2.5; //半径
function drowClock(){
//清除画布 clock.clearRect(0, 0, 800, 800);
var now = new Date();
var secd = now.getSeconds();
var min = now.getMinutes();
var hour = now.getHours();
//小时必须获取浮点类型（小时+分数转化的小时）
//时间格式19:23:30
//将24小时进制装换为12小时进制
hour = hour + (min / 60);
hour = hour > 12 ? hour - 12 : hour;
//外圈
clock.beginPath();
clock.lineWidth = 10;
clock.strokeStyle = "#d9d9d9";
clock.arc(250, 250, 200, 0, 360, false);
clock.stroke();
clock.closePath();
//刻度
//时刻度
for (var i = 0; i < 12; i++) {
clock.save();
//设置时针的粗细
clock.lineWidth = 7;
//设置时针的颜色
clock.strokeStyle = "#727272";
//先设置0,0点
clock.translate(250, 250);
//再设置旋转角度
clock.rotate((i * 30) * Math.PI / 180);//角度*Math.PI/180=弧度
clock.beginPath();
clock.moveTo(0, -170);
clock.lineTo(0, -190);
clock.closePath();
clock.stroke();
clock.restore();
}
//分刻度
for (var i = 0; i < 60; i++) {
clock.save();
//设置时针的粗细
clock.lineWidth = 3;
//设置时针的颜色
clock.strokeStyle = "#727272";
//先设置0,0点
clock.translate(250, 250);
//再设置旋转角度
clock.rotate((i * 6) * Math.PI / 180);//角度*Math.PI/180=弧度
clock.beginPath();
clock.moveTo(0, -180);
clock.lineTo(0, -190);
clock.closePath();
clock.stroke();
clock.restore();
}
//时针
clock.save();
clock.lineWidth = 7;
clock.strokeStyle = "#727272";
clock.translate(250, 250);
clock.rotate(hour * 30 * Math.PI / 180);
clock.beginPath();
clock.moveTo(0, -140);
clock.lineTo(0, 30);
clock.stroke();
clock.closePath();
clock.restore();
// 文字
for(i = 0;i<12;i++){
angle = i * 30;
// 转换为弧度制,Math.sin、Math.cos都接受弧度制单位
angle = angle*Math.PI/180;;
font = (i + 3 > 12)?i+3-12 : i+3;
fontX = 245+Math.round(Math.cos(angle)*(r-45));
fontY = 256+Math.round(Math.sin(angle)*(r-45));
clock.font = 'bold 16px 微软雅黑';
clock.fillText(font+'',fontX,fontY);
}
//分针
clock.save();
clock.lineWidth = 5;
clock.strokeStyle = "#727272";
clock.translate(250, 250);
clock.rotate(min * 6 * Math.PI / 180);
clock.beginPath();
clock.moveTo(0, -160);
clock.lineTo(0, 30);
clock.stroke();
clock.closePath();
clock.restore();
//秒针
clock.save();
clock.lineWidth = 3;
clock.strokeStyle = "#727272";
clock.translate(250, 250);
clock.rotate(secd * 6 * Math.PI / 180);
clock.beginPath();
clock.moveTo(0, -170);
clock.lineTo(0, 30);
clock.closePath();
clock.stroke();
//画交叉点
clock.beginPath();
clock.arc(0, 0, 5, 0, 360, false);
clock.closePath();
clock.fillStyle = "#ebebeb";
clock.fill();
clock.stroke();
clock.beginPath();
clock.arc(0, -150, 5, 0, 360, false);
clock.closePath();
clock.fillStyle = "gray";
clock.fill();
clock.stroke();
clock.restore(); window.requestAnimationFrame(drowClock);
}
//使用setInternal（代码，（毫秒）时间） 让时钟动起来
drowClock();
// setInterval(drowClock, 1000);
</script>
</body>
</html>