<!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>