废话不多说直接代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<canvas id="clock" width="500" height="500">您的浏览器不支持canvas</canvas>
<script>
var clock = document.getElementById('clock');
var cxt = clock.getContext('2d');
function Draw() {
//清楚画布
cxt.clearRect(0,0,500,500)
var now = new Date();
var sec = now.getSeconds();
var mute = now.getMinutes();
var hour = now.getHours();
//小时必须浮点类型
hour = hour + mute / 60;
//问题时间格式
//将24小时进制转换为12小时
hour = hour > 12 ? hour - 12 : hour;
//表盘
cxt.lineWidth = 10;
cxt.strokeStyle = "blue";
cxt.beginPath();
//250,250表示圆心的位置，200半径，0,360画圆的角度，最后一个参数是正画还是反画
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";
//先设置原点，
cxt.translate(250, 250);
//再设置旋转角度
cxt.rotate(i * 30 * Math.PI / 180);//角度*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";
//设置异次元原点
cxt.translate(250, 250);
//设置旋转角度
cxt.rotate(hour*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0, -150);
cxt.lineTo(0,10);
cxt.closePath();
cxt.stroke();
cxt.restore();
//画分针
cxt.save();
//设置样式
cxt.lineWidth = 5;
cxt.strokeStyle = "#000";
cxt.translate(250, 250);
cxt.rotate(mute*6* Math.PI / 180);
cxt.beginPath();
cxt.moveTo(0,-160);
cxt.lineTo(0,15);
cxt.closePath();
cxt.stroke();
cxt.restore();
//设置秒针
cxt.save();
cxt.strokeStyle = "red";
cxt.lineWidth = 3;
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.fillStyle = "gray";
cxt.fill();
cxt.closePath();
//设置填充样式
cxt.stroke();
cxt.restore();
}
//使用定时函数
setInterval(Draw,1000); </script></body></html>来张图：（略丑，是非常丑）
