<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
html,body{
background:#000;
}
#c1{
background:#fff;
}
</style>
<script>
window.onload=function(){
var oC=document.getElementById('c1');
var gd=oC.getContext('2d');
function toDraw(){
var x=200;
var y=200;
var r=150;
var oDate= new Date();
var h=oDate.getHours();
var m=oDate.getMinutes();
var s=oDate.getSeconds();
var ms=oDate.getMilliseconds();
console.log(ms);
gd.clearRect(0,0,oC.width,oC.height);
for(var i=0;i<60;i++){
gd.beginPath();
gd.moveTo(x,y);
gd.arc(x,y,r,i*6*Math.PI/180,(i+1)*6*Math.PI/180,false);
gd.closePath();
gd.stroke();
}
gd.fillStyle='#fff';
gd.beginPath();
gd.moveTo(x,y);
gd.arc(x,y,r*19/20,0,360*Math.PI/180,false);
gd.closePath();
gd.fill();
for(var i=0;i<12;i++){
gd.beginPath();
gd.moveTo(x,y);
gd.arc(x,y,r,i*30*Math.PI/180,(i+1)*30*Math.PI/180,false);
gd.closePath();
gd.stroke();
}
gd.fillStyle='#fff';
gd.beginPath();
gd.moveTo(x,y);
gd.arc(x,y,r*18/20,0,360*Math.PI/180,false);
gd.closePath();
gd.fill();
gd.lineWidth=5;
gd.beginPath();
gd.moveTo(x,y);
gd.arc(x,y,r*14/20,(-90+h*30+m/2)*Math.PI/180,(-90+h*30+m/2)*Math.PI/180,false);
gd.closePath();
gd.stroke();
gd.lineWidth=3;
gd.beginPath();
gd.moveTo(x,y);
gd.arc(x,y,r*16/20,(-90+m*6+s/10)*Math.PI/180,(-90+m*6+s/10)*Math.PI/180,false);
gd.closePath();
gd.stroke();
gd.lineWidth=1;
gd.beginPath();
gd.moveTo(x,y);
gd.arc(x,y,r*18/20,(-90+s*6+ms*6/1000)*Math.PI/180,(-90+s*6+ms*6/1000)*Math.PI/180,false);
gd.closePath();
gd.stroke();
}
toDraw();
setInterval(toDraw,1000)
};
</script>
</head>
<body>
<canvas width="600" height="600" id="c1"></canvas>
</body>
</html>
