<body><canvas width="600px" height="600px" style="background-color: #ccc; display:block; margin: 0 auto"></canvas></body>
<script>
window.onload = function(){
// 获取 canvas 对象
var canvas = document.querySelector("canvas");
// 获取上下文
var context = canvas.getContext("2d");
// 封装一个函数，用来时钟的动静
function clock(){
// 绘制圆盘
context.beginPath();// 开始
context.arc(300,300,200,0,2*Math.PI);
context.fillStyle = "pink";// 圆盘的色彩
context.fill();// 绘制圆盘
context.closePath();// 完结
// 绘制时刻度
for(var i=0; i<12; i++){context.save();// 保留
context.lineWidth = 4;// 时针的宽度
context.beginPath();
context.translate(300,300);// 将原点平移到圆心
context.rotate(i*(Math.PI*6));//360/12=30° 180°/30°=6
context.moveTo(0,-180);
context.lineTo(0,-200);
context.stroke();// 绘制线条
context.fillStyle = "black";// 线条的色彩
// 绘制时钟数字
context.font = "28px bold";// 字体大小为 28px，加粗
context.rotate(Math.PI/6);// 将字体旋转 30°
context.fillText(i+1,-7,-220);// 数字回转 -7，并且在圆外显示
context.closePath();
context.restore();
context.restore();// 回滚}
// 绘制分刻度
for(i=0; i<60; i++){context.save();
context.translate(300,300);// 平移到原点
context.rotate(i*(Math.PI/30));
context.beginPath();
context.moveTo(0,-190);
context.lineTo(0,-200);
context.stroke();
context.closePath();
context.restore();}
// 获取以后工夫
var today = new Date();
// 获取以后小时
var hour = today.getHours();
// 获取分
var min = today.getMinutes();
// 获取秒
var sec = today.getSeconds();
hour = hour+min/60;
// 绘制时针
context.save();
context.lineWidth = 3;
context.translate(300,300);
context.rotate(hour*(Math.PI/6));
context.beginPath();
context.moveTo(0,10);
context.lineTo(0,-80);
context.stroke();
context.closePath();
context.restore();
// 绘制分针
context.save();
context.lineWidth = 2;
context.translate(300,300);
context.rotate(min*(Math.PI/30));
context.beginPath();
context.moveTo(0,10);
context.lineTo(0,-100);
context.stroke();
context.closePath();
context.restore();
// 绘制秒针
context.save();
context.lineWidth=1;
context.rotate(sec*(Math.PI/30));
context.strokeStyle = "red";
context.beginPath();
context.moveTo(0,10);
context.lineTo(0,-120);
context.stroke();
context.closePath();
context.restore();
// 交叉处
context.save();
context.translate(300,300);
context.beginPath();
context.fillStyle = "#ccc";
context.strokeStyle = "red";
context.arc(0,0,5,0,Math.PI*2);
context.fill();
context.stroke();
context.closePath();
context.restore();
setTimeout(clock,1000);// 超时模仿
}
clock();}
</script>