<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{background:#000;}
#c1{background-color: #fff;}
</style>
<script>
window.onload=function(){
var oC=document.getElementById(‘c1‘);
var oGc=oC.getContext(‘2d‘);
function toDraw(){
var x=200;
var y=200;
var r=150;
oGc.clearRect(0,0,oGc.width,oGc.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 oMinsValue=(-90+oMin*6)*Math.PI/180;
var oSenValue=(-90+oSen*6)*Math.PI/180;
oGc.beginPath();
for(var i=0;i<60;i++){
oGc.moveTo(x,y);
oGc.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
}
oGc.closePath();
oGc.stroke();
oGc.fillStyle=‘white‘;
oGc.beginPath();
oGc.closePath();
oGc.moveTo(x,y);
oGc.arc(x,y,r*19/20,0,360*Math.PI/180,false);
oGc.fill();
oGc.lineWidth=3;
oGc.beginPath();
for(var i=0;i<12;i++){
oGc.moveTo(x,y);
oGc.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
}
oGc.closePath();
oGc.stroke();
oGc.fillStyle=‘white‘;
oGc.beginPath();
oGc.closePath();
oGc.moveTo(x,y);
oGc.arc(x,y,r*18/20,0,360*Math.PI/180,false);
oGc.fill();
oGc.lineWidth=5;
oGc.beginPath();
oGc.moveTo(x,y);
oGc.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);
oGc.closePath();
oGc.stroke();
oGc.lineWidth=3;
oGc.beginPath();
oGc.moveTo(x,y);
oGc.arc(x,y,r*14/20,oMinsValue,oMinsValue,false);
oGc.closePath();
oGc.stroke();
oGc.lineWidth=1;
oGc.beginPath();
oGc.moveTo(x,y);
oGc.arc(x,y,r*19/20,oSenValue,oSenValue,false);
oGc.closePath();
oGc.stroke();
}
setInterval(toDraw,1000);
toDraw();
}
</script>
</head>
<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>原文：http://www.cnblogs.com/yuanxianmo/p/5328836.html