JavaScript HTML5 canvas Drawing clock effect _javascript tips

This example describes the JAVASCRIPT+HTML5 canvas drawing clock effect. Share to everyone for your reference, specific as follows:

HTML section:

<! DOCTYPE html>
 
 

JavaScript section:

function init () {var canvas = document.getElementById ("Canvas"), context = Canvas.getcontext ("2d");
SetInterval (function () {Draw (canvas, context)},1000);

 function Draw (canvas, context) {var x = canvas.width, y = canvas.height, r = Math.min (X/2, Y/2); Context.clearrect (0, 0, x, y);
 Clear painting history//painting clock frame Context.fillstyle = "#f1f1f1";
 Drawcircle (context, x, Y, R);
 Painting text var tx = X/2,ty = Y/2,TR = 0.8*r;
 Context.font = "bold 12px Microsoft Ya Hei";
 Context.fillstyle = "#000";
 DrawText (Context, "1", TX + 0.5*TR,TY-0.866*TR);
 DrawText (Context, "2", TX + 0.866*TR, TY-0.5*TR);
 DrawText (Context, "3", TX + tr, ty);
 DrawText (Context, "4", TX + 0.866*tr, Ty + 0.5*tr);
 DrawText (Context, "5", TX + 0.5*tr, Ty + 0.866*tr);
 DrawText (Context, "6", TX, Ty + TR);
 DrawText (Context, "7", tx-0.5*tr, Ty + 0.866*tr);
 DrawText (Context, "8", tx-0.866*tr, Ty + 0.5*tr);
 DrawText (Context, "9", tx-tr, Ty);
 DrawText (Context, "Ten", Tx-0.866*tr, TY-0.5*TR); DrawText (Context, "one", tx-0.5*TR, TY-0.866*TR);
 DrawText (Context, "a", TX, TY-TR); Gets the current time var date = new Date (), H = date.gethours (), M = Date.getminutes (), S = Date.getseconds (), Angleh = (360/
  *math.pi/180, Anglem = (360/60) *math.pi/180 Context.strokesyle = "#000";
  Draw Time degrees Drawscale (context, x, Y, R, Angleh, -0.88*r, -0.96*r, 3);
 Draw sub-scale Drawscale (context, x, Y, R, Anglem, -0.93*r, -0.96*r, 1);
 Drawcircle (context, x, Y, 3) when drawing.
 Drawneedle (context, x, Y, R, H*angleh + M*ANGLEM/12, -0.5*r);
 Drawneedle (context, x, Y, R, M*anglem + S*ANGLEM/60, -0.6*r);

Drawneedle (context, x, Y, R, S*anglem, -0.75*r);
 ///painting round function drawcircle (context, x, Y, R) {context.save ();
 Context.beginpath ();
 Context.arc (X/2, Y/2, R, 0, math.pi*2, 0);
 Context.fill ();
 Context.closepath ();
Context.restore ();
 ///Painting Text method function DrawText (context, text, x, y) {context.save ();
 X-= (Context.measuretext (text). WIDTH/2);
 Y + 4;
 Context.translate (x, y);
 Context.filltext (text, 0, 0); Context.restoRe ();
 ///Draw Scale method function Drawscale (context, x, Y, R, rotate, start, end, linewidth) {context.save ();
 Context.beginpath ();
 Context.translate (X/2,Y/2);
 Context.linewidth = linewidth;
  for (var i = 0; i < i++) {context.rotate (rotate); 
  Context.moveto (0, start);
 Context.lineto (0, end);
 } context.closepath ();
 Context.stroke ();
Context.restore ();
 ///Stitch Method function Drawneedle (context, x, Y, R, rotate, line) {Context.save ();
 Context.translate (X/2,Y/2);
 Context.beginpath ();
 Context.rotate (rotate);
 Context.moveto (0, 0.1*r);
 Context.lineto (0, line);
 Context.closepath ();
 Context.stroke ();
Context.restore ();
 }

I hope this article will help you with your JavaScript programming.