How to draw a watch by canvas _HTML5 Tutorial Tips

This article mainly introduced the HTML5 in the canvas how to draw the information of the method of the clock, small series think that HTML is really more and more powerful, and now share to everyone, but also for everyone to do a reference. For the little Friends of HTML, you can follow the small part together.

This article describes how canvas can be used to draw a clock and share it with you, as follows:

For

On the code:

var canvas = document.getElementById (' canvas '); var ctx = Canvas.getcontext (' 2d '); var year,month,day,hour,second,    minute;//Draw dial Function Drawclockpie () {Ctx.beginpath ();    Ctx.linewidth = 2;    Ctx.strokestyle = ' #333 ';    Ctx.arc (150,150,146,0,2*MATH.PI);    Ctx.stroke ();    Ctx.closepath ();    Ctx.beginpath ();    Ctx.arc (150,150,6,0,2*MATH.PI);    Ctx.fillstyle = ' red ';    Ctx.fill (); Ctx.closepath ();}        Draw the Time function drawclockhours () {for (var i = 0,l = n; i <; i++) {ctx.save ();        Ctx.translate (150,150);        Ctx.rotate (I*1/12*2*MATH.PI);        Ctx.beginpath ();        Ctx.linewidth = 5;        Ctx.strokestyle = ' #333 ';        Ctx.moveto (0,-140);        Ctx.lineto (0,-125);        Ctx.stroke ();        Ctx.closepath ();    Ctx.restore ();        }}//Draw the sub-scale function drawclockmins () {for (var i = 0,l =; i <; i++) {ctx.save ();        Ctx.translate (150,150);        Ctx.rotate (I*1/60*2*MATH.PI);        Ctx.beginpath ();   Ctx.linewidth = 3;     Ctx.strokestyle = ' #333 ';        Ctx.moveto (0,-140);        Ctx.lineto (0,-133);        Ctx.stroke ();        Ctx.closepath ();    Ctx.restore ();    }}//draw the Hour function Drawhourpin () {ctx.save ();    Ctx.translate (150,150);    Ctx.rotate ((Hour*60*60+minute*60+second)/(12*60*60) *2*math.pi);    Ctx.beginpath ();    Ctx.strokestyle = ' #333 ';    Ctx.linewidth = 3;    Ctx.moveto (0,0);    Ctx.lineto (0,-40);    Ctx.stroke ();    Ctx.closepath (); Ctx.restore ();}    Draw the minute hand function Drawminpin () {ctx.save ();    Ctx.translate (150,150);    Ctx.rotate ((Minute*60+second)/(60*60) *2*math.pi);    Ctx.beginpath ();    Ctx.strokestyle = ' #333 ';    Ctx.linewidth = 2;    Ctx.moveto (0,0);    Ctx.lineto (0,-60);    Ctx.stroke ();    Ctx.closepath (); Ctx.restore ();}    Draw the second hand function Drawsecpin () {ctx.save ();    Ctx.translate (150,150);    Ctx.rotate (SECOND/60*2*MATH.PI);    Ctx.beginpath ();    Ctx.strokestyle = ' red ';    Ctx.linewidth = 1;    Ctx.moveto (0,0);    Ctx.lineto (0,-80);    Ctx.stroke (); CtX.closepath (); Ctx.restore ();}    Draw Time text function DrawText () {hour = Hour >=? hour-12:hour;    var time = ' Now is ' + year + ' years ' + month + ' month ' + day + ' date ' + hour + ' when ' + minute + ' + ' + second + ' seconds ';    Ctx.font = ' 15px blackbody '; Ctx.filltext (time,24,350);}    Get Time function Gettimes () {var date = new Date ();    Year = Date.getfullyear ();    month = Date.getmonth () + 1;    Day = Date.getdate ();    hour = Date.gethours ();    minute = Date.getminutes (); Second = Date.getseconds ();}    SetInterval (function () {ctx.clearrect (0,0,600,600);    Drawclockpie ();    Drawclockhours ();    Drawclockmins ();    Gettimes ();    DrawText ();    Drawhourpin ();    Drawminpin (); Drawsecpin ();},1000);

Note:

Of course, time can not be obtained every second, the direct acquisition of a second increment on the line.