Alarm Clock made by HTM5

HTML5 out for a long time has not studied, today looking for a video to see, research, made an alarm clock.

As follows

<div> <canvas id="Clock"Width=" -"height=" -">your Broswer can not see the clock </canvas> <script>varClock = document.getElementById ("Clock"); varCXT = Clock.getcontext ("2d"); function Drawclock () {//Clear Canvas//To clear the canvas before you can keep the picture animatedCxt.clearrect (0,0, -, -); Cxt.font="20px Blackadder ITC"; Cxt.filltext ("My Clock", -, Max); Cxt.font="14px Blackadder ITC"; Cxt.filltext ("---made by Lan", -, the); varImage =NewImage (); IMAGE.SRC="1.png"; Cxt.drawimage (Image, -,280, -, -); varnow =NewDate (); varSEC =now.getseconds (); varMin =now.getminutes (); varhour = Now.gethours ();//must be hour+ min/60Hour = hour + min/ -; Hour= Hour > A? Hour- A: Hour; //round, scale, NiddleCxt.beginpath (); Cxt.arc ( -, -, $,0, the,false); Cxt.strokestyle="#ABCDEF"; Cxt.linewidth=9;                    Cxt.stroke ();                    Cxt.closepath (); //scale scales, momentCxt.font ="30px Bold";  for(vari =0; I < A; i++) {cxt.save (); Cxt.linewidth=7; Cxt.strokestyle="Black"; Cxt.translate ( -, -); Cxt.rotate (i* -* Math.PI/ the);                        Cxt.beginpath (); Cxt.moveto (0, - the); Cxt.lineto (0, - the); if(i = =0) {Cxt.filltext (" A", -Ten, -145); }                        Else{Cxt.filltext (i.ToString (),-Ten, -145);                        } cxt.stroke ();                        Cxt.closepath ();                    Cxt.restore (); }
Points for(varj =0; J < -; J + +) {cxt.save (); Cxt.linewidth=4; Cxt.translate ( -, -); Cxt.rotate (J*6* Math.PI/ the);                        Cxt.beginpath (); Cxt.moveto (0, - the); Cxt.lineto (0, - the); Cxt.strokestyle="Black";                        Cxt.stroke ();                        Cxt.closepath ();                    Cxt.restore ();                    } cxt.beginpath ();                    Cxt.save (); Cxt.linewidth=7; Cxt.strokestyle="Black"; Cxt.translate ( -, -); Cxt.rotate (Hour* -* Math.PI/ the); Cxt.moveto (0, - Max); Cxt.lineto (0,Ten);                    Cxt.stroke ();                    Cxt.restore ();                    Cxt.closepath ();                    Cxt.beginpath ();                    Cxt.save (); Cxt.linewidth=5; Cxt.strokestyle="Black"; Cxt.translate ( -, -); Cxt.rotate (min*6* Math.PI/ the); Cxt.moveto (0, - the); Cxt.lineto (0,Ten);                    Cxt.stroke ();                    Cxt.restore ();                    Cxt.closepath ();                    Cxt.beginpath ();                    Cxt.save (); Cxt.linewidth=3; Cxt.strokestyle="Red"; Cxt.fillstyle="Black"; Cxt.translate ( -, -); Cxt.rotate (sec*6* Math.PI/ the);//sec Cxt.moveto (0, Max); Cxt.lineto (0, - the);                    Cxt.stroke ();                    Cxt.beginpath (); Cxt.arc (0,0,5,0, the,false); Cxt.fillstyle="Gray"; Cxt.strokestyle="Red";                    Cxt.fill ();                    Cxt.closepath ();                    Cxt.beginpath (); Cxt.arc (0, the,5,0, the,false); Cxt.fillstyle="Black"; Cxt.strokestyle="Red";                    Cxt.fill ();                    Cxt.stroke ();                    Cxt.restore ();                Cxt.closepath ();                } drawclock (); SetInterval (Drawclock, +); </script> </div>

There are several common methods that need to be noted in 1. Closepath,beginpath (), use the path to draw the time, you need to pay attention to each, open the path, close the path 2. When doing the rotation should pay attention to set the origin, translate (250,250);