Making a clock animation with HTML5

1 <  ID= "Clock"  width= " a" height= " a" style = "Background-color:yellow" ></ Canvas >

1 varClock=document.getelementbyid ("Clock");2     varCxt=clock.getcontext ("2d");3 functionDrawnow () {4     varnow=NewDate ();5     varHour=now.gethours ();6     varmin=now.getminutes ();7     varSec=now.getseconds ();8Hour=hour>12?hour-12: Hour;9HOUR=HOUR+MIN/60;Ten     //dial (blue) Onecxt.linewidth=10; ACxt.strokestyle= "Blue" - Cxt.beginpath (); -Cxt.arc (250,250,200,0,360,false); the Cxt.closepath (); - Cxt.stroke (); -     //scale -     //moment degree +      for(vari=0;i<12;i++){ - Cxt.save (); +Cxt.linewidth=7; ACxt.strokestyle= "BLACK"; atCxt.translate (250,250); -Cxt.rotate (i*30*math.pi/180);//rotation angle angle *math.pi/180=radians - Cxt.beginpath (); -Cxt.moveto (0,-170); -Cxt.lineto (0,-190); - Cxt.closepath (); in Cxt.stroke (); - Cxt.restore (); to     } +     //Sub-scale -      for(vari=0;i<60;i++){ the Cxt.save (); *         //set the weight of a scale $Cxt.linewidth=5;Panax Notoginseng         //Reset Canvas Origin -Cxt.translate (250,250); the         //Set Rotation angle +Cxt.rotate (i*6*math.pi/180); A         //draw the minute hand scale theCxt.strokestyle= "BLACK"; + Cxt.beginpath (); -Cxt.moveto (0,-180); $Cxt.lineto (0,-190); $ Cxt.closepath (); - Cxt.stroke (); - Cxt.restore (); the     } - Wuyi     //Hour the Cxt.save (); -     //set the hour hand style WuCxt.linewidth=7; -Cxt.strokestyle= "BLACK"; AboutCxt.translate (250,250); $Cxt.rotate (hour*30*math.pi/180); - Cxt.beginpath (); -Cxt.moveto (0,-140); -Cxt.lineto (0,10); A Cxt.closepath (); + Cxt.stroke (); the Cxt.restore (); -     //minute $ Cxt.save (); theCxt.linewidth=5; theCxt.strokestyle= "BLACK"; the     //sets the center of the minute hand canvas for the second dimension theCxt.translate (250,250); -Cxt.rotate (min*6*math.pi/180); in Cxt.beginpath (); theCxt.moveto (0,-160); theCxt.lineto (0,15); About Cxt.closepath (); the Cxt.stroke () the Cxt.restore (); the  +     //seconds - Cxt.save (); the     //set the style of the second handBayi     //Color: Red thecxt.strokestyle= "Red"; theCxt.linewidth=3; -     //Reset Origin -Cxt.translate (250,250); the     //Setting the angle the     //cxt.rotate (330*math.pi/180); theCxt.rotate (sec*6*math.pi/180); the  - Cxt.beginpath (); theCxt.moveto (0,-170); theCxt.lineto (0,20); the Cxt.closepath ();94 Cxt.stroke (); the     //draw the intersection of the hour, minute and second hand the Cxt.beginpath (); theCxt.arc (0,0,5,0,360,false);98 Cxt.closepath (); About     //Set the Fill -Cxt.fillstyle= "Gray";101 Cxt.fill ();102     //cxt.strokestyle= "Red";103 Cxt.stroke ();104  the     //draw the small dot of the second hand106 Cxt.beginpath ();107Cxt.arc (0,-140,5,0,360,false);108 Cxt.closepath ();109     //Set the Fill theCxt.fillstyle= "Gray";111 Cxt.fill (); the     //cxt.strokestyle= "Red";113 Cxt.stroke (); the  the  the Cxt.restore ();117 118 119  - }121 functionDrawclock () {122Cxt.clearrect (0,0,500,500);123 Drawnow ();124 } the Drawnow ();126SetInterval (drawclock,1000);