效果：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<canvas width="500" height="500" style="background-color: black;">
您的浏览器版本太低，请升级后查看
</canvas>
<script>
var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
function clock(){
//先清除原来画布上的内容
ctx.clearRect(0, 0, 500, 500);
//画表盘
ctx.beginPath();
ctx.arc(250, 250, 200, 0, 2*Math.PI);
ctx.lineWidth = 10;
ctx.strokeStyle = '#474747';
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc(250, 250, 210, 0, 2*Math.PI);
ctx.lineWidth = 10;
ctx.strokeStyle = '#b8b8b8';
ctx.stroke();
ctx.closePath();
//画中心点
ctx.beginPath();
ctx.arc(250, 250, 5, 0, 2*Math.PI);
ctx.lineWidth = 10;
ctx.strokeStyle = 'brown';
ctx.stroke();
ctx.closePath();
//画刻度（分钟）
for(var i=0; i<60; i++){
ctx.beginPath();
ctx.save(); // 保存原来的画布，意思是创建一个新的画布
ctx.translate(250, 250); // 重置新画布的0,0点为原来画布的中心点
ctx.rotate(6*i*Math.PI/180); //以新画布的0,0点为轴，旋转新的画布
ctx.lineWidth = 5;
ctx.strokeStyle = 'blue';
ctx.moveTo(195, 0); //根据新画布，找线段的起始点
ctx.lineTo(185, 0); //根据新画布，找线段的起始点
ctx.stroke(); //画，画的时候是画到原来的画布上。
ctx.restore(); //回到原来的作图环境，删除新创建的画布
ctx.closePath();
}
//画刻度(小时刻度)
for(var i=0; i<12; i++){
ctx.beginPath();
ctx.save(); // 保存原来的画布，意思是创建一个新的画布
ctx.translate(250, 250); // 重置新画布的0,0点为原来画布的中心点
ctx.rotate(30*i*Math.PI/180); //以新画布的0,0点为轴，旋转新的画布
ctx.lineWidth = 8;
ctx.strokeStyle = 'blue';
ctx.moveTo(195, 0); //根据新画布，找线段的起始点
ctx.lineTo(175, 0); //根据新画布，找线段的起始点
ctx.stroke(); //画，画的时候是画到原来的画布上。
ctx.restore(); //回到原来的作图环境，删除新创建的画布
ctx.closePath();
}
//画刻度(四个大点)
for(var i=0; i<4; i++){
ctx.beginPath();
ctx.save(); // 保存原来的画布，意思是创建一个新的画布
ctx.translate(250, 250); // 重置新画布的0,0点为原来画布的中心点
ctx.rotate(90*i*Math.PI/180); //以新画布的0,0点为轴，旋转新的画布
ctx.lineWidth = 12;
ctx.strokeStyle = '#ff2d2a';
ctx.moveTo(195, 0); //根据新画布，找线段的起始点
ctx.lineTo(175, 0); //根据新画布，找线段的起始点
ctx.stroke(); //画，画的时候是画到原来的画布上。
ctx.restore(); //回到原来的作图环境，删除新创建的画布
ctx.closePath();
}
//获取当前的时间
var d = new Date();
var second = d.getSeconds(); // 秒
var minute = d.getMinutes() + second/60; // 分
var hour = d.getHours() + minute/60; // 小时
//console.log(hour);
//画时针
ctx.beginPath();
ctx.save(); // 保存原来的画布，意思是创建一个新的画布
ctx.translate(250, 250); // 重置新画布的0,0点为原来画布的中心点
ctx.rotate((hour*30 - 90)*Math.PI/180); //以新画布的0,0点为轴，旋转新的画布
ctx.lineWidth = 12;
ctx.strokeStyle = '#edc87e';
ctx.moveTo(-20, 0); //根据新画布，找线段的起始点
ctx.lineTo(105, 0); //根据新画布，找线段的起始点
ctx.stroke(); //画，画的时候是画到原来的画布上。
ctx.restore(); //回到原来的作图环境，删除新创建的画布
ctx.closePath();
//画分针
ctx.beginPath();
ctx.save(); // 保存原来的画布，意思是创建一个新的画布
ctx.translate(250, 250); // 重置新画布的0,0点为原来画布的中心点
ctx.rotate((minute * 6 - 90)*Math.PI/180); //以新画布的0,0点为轴，旋转新的画布
ctx.lineWidth = 8;
ctx.strokeStyle = '#edc87e';
ctx.moveTo(-20, 0); //根据新画布，找线段的起始点
ctx.lineTo(135, 0); //根据新画布，找线段的起始点
ctx.stroke(); //画，画的时候是画到原来的画布上。
ctx.restore(); //回到原来的作图环境，删除新创建的画布
ctx.closePath();
//画秒针
ctx.beginPath();
ctx.save(); // 保存原来的画布，意思是创建一个新的画布
ctx.translate(250, 250); // 重置新画布的0,0点为原来画布的中心点
ctx.rotate((second * 6 - 90)*Math.PI/180); //以新画布的0,0点为轴，旋转新的画布
ctx.lineWidth = 2;
ctx.strokeStyle = 'red';
ctx.moveTo(-20, 0); //根据新画布，找线段的起始点
ctx.lineTo(175, 0); //根据新画布，找线段的起始点
ctx.stroke(); //画，画的时候是画到原来的画布上。
ctx.restore(); //回到原来的作图环境，删除新创建的画布
ctx.closePath();
//画一个螺丝
ctx.beginPath();
ctx.arc(250,250, 3, 0, 2*Math.PI);
ctx.lineWidth = 6;
ctx.strokeStyle = 'black';
ctx.stroke();
ctx.closePath();
}
//页面加载完毕，首先先调用一个clock
clock();
setInterval(clock, 1000);
</script>
</body>
</html>