Canvas Learning Notes (1)-Drawing clocks

HTML code:

<! DOCTYPE html>    div{        text-align:center;        Margin-top:150px;    }     </style>
JS Code:
Window.onload=function(){    varDom=document.getelementbyid ("Clock"); Get Canvas LabelsvarCtx=dom.getcontext ("2d"); Create a Context objectvarWidth=Ctx.canvas.width; Get Canvas widthvarheight=Ctx.canvas.height; Get Canvas heightvarR=WIDTH/2;varrem=width/200;
Draw backgroundfunctionDrawbackground () {ctx.save ();        Ctx.translate (R,R);        Ctx.beginpath (); Ctx.linewidth=5*REM; Ctx.arc (0, 0, R-5*REM/2, 0, 2*math.pi,false);        Ctx.stroke (); Ctx.font=18*rem+ "px Arial"; Ctx.textalign= "Center"; Ctx.textbaseline= "Middle"; varhournumbers=[3,4,5,6,7,8,9,10,11,12,1,2]; Hournumbers.foreach (function(number,i) {varRad=2*math.pi/12*i;varX=math.cos (RAD) * (r-30*REM); varY=math.sin (RAD) * (r-30*REM);        Ctx.filltext (number, x, y); })         for(vari=0;i<60;i++){            varRad=2*math.pi/60*i;varX=math.cos (RAD) * (r-18*REM); varY=math.sin (RAD) * (r-18*REM);            Ctx.beginpath (); if(i%5==0) {Ctx.fillstyle= "#000"; Ctx.arc (x, Y,2*rem, 0, 2*math.pi,false); }Else{Ctx.fillstyle= "#ccc"; Ctx.arc (x, Y,2*rem, 0, 2*math.pi,false);          } ctx.fill (); }    }
Draw the hour handfunctionDrawhour (Hour,minute) {ctx.save ();        Ctx.beginpath (); Ctx.fillstyle= "#000"; varRad=2*math.pi/12*hour;varmrad=2*math.pi/12/60*minute; Ctx.rotate (Rad+mrad); Ctx.linewidth=3*REM; Ctx.moveto (-2*rem, 10*REM); Ctx.lineto (2*rem, 10*REM); Ctx.lineto (1*rem, 40*rem-R); Ctx.lineto (-1*rem, 40*rem-R);        Ctx.fill ();    Ctx.restore (); }
Draw the minute handfunctionDrawminute (minute) {ctx.save ();        Ctx.beginpath (); Ctx.fillstyle= "#666"; varRad=2*math.pi/60*minute;Ctx.rotate (RAD); Ctx.linecap= "Round"; Ctx.linewidth=3*REM; Ctx.moveto (-2*rem, 10*REM); Ctx.lineto (2*rem, 10*REM); Ctx.lineto (1*rem, 28*rem-R); Ctx.lineto (-1*rem, 28*rem-R);        Ctx.fill ();    Ctx.restore (); }
Draw the second handfunctionDrawsecond (second) {ctx.save ();        Ctx.beginpath (); Ctx.fillstyle= "#c14543"; varRad=2*math.pi/60*second;Ctx.rotate (RAD); Ctx.linewidth=3*REM; Ctx.moveto (-2*rem, 20*REM); Ctx.lineto (2*rem, 20*REM); Ctx.lineto (1*rem, 18*rem-R); Ctx.lineto (-1*rem, 18*rem-R);        Ctx.fill ();    Ctx.restore (); }
Draw Center White DotfunctionDrawdot () {Ctx.beginpath (); Ctx.fillstyle= "#fff"; Ctx.arc (0, 0, 3, 0, 2*math.pi,false);    Ctx.fill (); }
Method of DrawingfunctionDraw () {Ctx.clearrect (0,0, Width,height); varDate=NewDate (); varhours=date.gethours (); varminutes=date.getminutes (); varseconds=date.getseconds ();        Drawbackground ();        Drawhour (hours,minutes);        Drawminute (minutes);        Drawsecond (seconds);        Drawdot ();            Ctx.restore (); } draw ();
Each second calls a method of drawing setinterval (draw,1000);}
Note: REM is scaled, R-5*REM/2 is the radius of the outer circle, sine = edge/hypotenuse, cosine = collar edge/hypotenuse, radians equal arc length/radius, circle Radian =2πr/r=2π=2*math.piarc of an hour =2*MATH.PI/12, a minute of Radian =2*math.pi/60, second in the same vein
Canvas Learning Notes (1)-Drawing clocks