HTML5 Draw Clock Animation

<canvas id= "Clock" width= "height=" style= "Background-color:yellow" ></canvas>

The

code is as follows:


var Clock=document.getelementbyid ("clock");


var cxt=clock.getcontext ("2d");


function Drawnow () {


var now=new Date ();


var hour=now.gethours ();


var min=now.getminutes ();


var sec=now.getseconds ();


hour=hour&gt;12?hour-12:hour;


hour=hour+min/60;


//Dial (blue)


cxt.linewidth=10;


cxt.strokestyle= "Blue"


Cxt.beginpath ();


Cxt.arc (250,250,200,0,360,false);


Cxt.closepath ();


Cxt.stroke ();


//Scale


//Time degree


for (Var i=0;i&lt;12;i++) {


Cxt.save ();


cxt.linewidth=7;


cxt.strokestyle= "BLACK";


cxt.translate (250,250);


Cxt.rotate (i*30*math.pi/180)//rotation angle angle *math.pi/180= radian


Cxt.beginpath ();


Cxt.moveto (0,-170);


Cxt.lineto (0,-190);


Cxt.closepath ();


Cxt.stroke ();


Cxt.restore ();


}


//Sub-scale


for (Var i=0;i&lt;60;i++) {


Cxt.save ();


//Set the thickness of the


cxt.linewidth=5;


//Reset canvas Origin


cxt.translate (250,250);


//Set rotation angle


cxt.rotate (i*6*math.pi/180);


//Draw minute hand scale


cxt.strokestyle= "BLACK";


Cxt.beginpath ();


Cxt.moveto (0,-180);


Cxt.lineto (0,-190);


Cxt.closepath ();


Cxt.stroke ();


Cxt.restore ();


}


//hour


Cxt.save ();


//Set the clockwise style


cxt.linewidth=7;


cxt.strokestyle= "BLACK";


Cxt.translate (250,250);


cxt.rotate (hour*30*math.pi/180);


Cxt.beginpath ();


Cxt.moveto (0,-140);


Cxt.lineto (0,10);


Cxt.closepath ();


Cxt.stroke ();


Cxt.restore ();


//minute hand


Cxt.save ();


cxt.linewidth=5;


cxt.strokestyle= "BLACK";


//Set the space of the minute hand canvas center


cxt.translate (250,250);


cxt.rotate (min*6*math.pi/180);


Cxt.beginpath ();


Cxt.moveto (0,-160);


Cxt.lineto (0,15);


Cxt.closepath ();


Cxt.stroke ()


Cxt.restore ();


//Seconds


Cxt.save ();


//Set the style of the seconds hand


//color: Red


cxt.strokestyle= "Red";


cxt.linewidth=3;


//Reset original point


cxt.translate (250,250);


//Set angle


Cxt.rotate (330*math.pi/180);


cxt.rotate (sec*6*math.pi/180);


Cxt.beginpath ();


Cxt.moveto (0,-170);


Cxt.lineto (0,20);


Cxt.closepath ();


Cxt.stroke ();


//Draw the intersection of the hour hand, the minute hand and the second hand


Cxt.beginpath ();


Cxt.arc (0,0,5,0,360,false);


Cxt.closepath ();


//Set fill


cxt.fillstyle= "Gray";


Cxt.fill ();


//cxt.strokestyle= "Red";


Cxt.stroke ();


//Draw a small dot of the second hand


Cxt.beginpath ();


Cxt.arc (0,-140,5,0,360,false);


Cxt.closepath ();


//Set fill


cxt.fillstyle= "Gray";


Cxt.fill ();


//cxt.strokestyle= "Red";


Cxt.stroke ();&lt;/p&gt; &lt;p&gt; cxt.restore ();&lt;/p&gt; &lt;p&gt;}


function Drawclock () {


Cxt.clearrect (0,0,500,500);


Drawnow ();


}


Drawnow ();


setinterval (drawclock,1000);