代码实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画时钟</title>
<style>
#c{
background: white;
}
</style>
<script>
window.onload=function() {
var Canvas=document.getElementById('c');
var ctx=Canvas.getContext('2d');
function toDraw() {
var x=200;
var y=200;
var r=150;
ctx.clearRect(0,0,Canvas.width,Canvas.height);
var oDate= new Date();
var oHours=oDate.getHours();
var oMin=oDate.getMinutes();
var oSen=oDate.getSeconds();
var oHoursValue=(-90+oHours*30+oMin/2) *Math.PI/180;
var oMinValue=(-90+oMin*6) *Math.PI/180;
var oSenValue=(-90+oSen*6) *Math.PI/180;
ctx.beginPath();
for(var i=0;i<60;i++) {
ctx.moveTo(x,y);
ctx.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
}
ctx.closePath();
ctx.stroke();
ctx.fillStyle='white';
ctx.beginPath();
ctx.moveTo(x,y);
ctx.arc(x,y,r*19/20,0,360*(i+1)*Math.PI/180,false);
ctx.closePath();
ctx.fill();
ctx.lineWidth=3;
ctx.beginPath();
for(var i=0;i<12;i++) {
ctx.moveTo(x,y);
ctx.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
}
ctx.closePath();
ctx.stroke();
ctx.fillStyle='white';
ctx.beginPath();
ctx.moveTo(x,y);
ctx.arc(x,y,r*18/20,0,360*(i+1)*Math.PI/180,false);
ctx.closePath();
ctx.fill();
//时钟
ctx.lineWidth=5;
ctx.beginPath();
ctx.moveTo(x,y);
ctx.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);
ctx.closePath();
ctx.stroke();
ctx.lineWidth=2;
ctx.beginPath();
ctx.moveTo(x,y);
ctx.arc(x,y,r*14/20, oMinValue, oMinValue,false);
ctx.closePath();
ctx.stroke();
ctx.lineWidth=2;
ctx.beginPath();
ctx.moveTo(x,y);
ctx.arc(x,y,r*19/20,oSenValue,oSenValue,false);
ctx.closePath();
ctx.stroke();
}
setInterval(toDraw,1000);
toDraw();
}
</script>
</head>
<body>
<canvas id="c" width="400" height="400"></canvas>
</body>
</html>
效果：
19:32:54 2017-09-08