JavaScripthtml5canvas: Drawing clock effects _ javascript skills

This article describes how to use JavaScripthtml5 to plot the clock effect. It simulates and displays a clock using the canvas tag and Javascript script of html5, if you are interested, you can refer to the example in this article to describe how JavaScript + html5 canvas draws the clock effect. We will share this with you for your reference. The details are as follows:

HTML section:

 
  
  Canvas plotting
 

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 the painting history // The context of the painting clock frame. fillStyle = "# f1f1f1"; drawCircle (context, x, y, r); // painting text var tx = x/2, ty = y/2, tr = 0.8 * r; context. font = "bold 12px "; 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, "10 ", tx-0.866 * tr, ty-0.5 * tr); drawText (context, "11", tx-0.5 * tr, ty-0.866 * tr); drawText (context, "12", tx, ty-tr); // obtain the current time var date = new Date (), h = date. getHours (), m = date. getMinutes (), s = date. getSeconds (), angleH = (360/12) * Math. PI/180, angleM = (360/60) * Math. PI/180 context. strokeSyle = "#000"; // draw the drawScale (context, x, y, r, angleH,-0.88 * r,-0.96 * r, 3 ); // draw a scale-down drawScale (context, x, y, r, angleM,-0.93 * r,-0.96 * r, 1); // draw a second-hour needle drawCircle (context, x, y, 3); 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);} // draw circle 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 ();} // method of painting text 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 ();} // Method for drawing the scale 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 <60; I ++) {context. rotate (rotate); context. moveTo (0, start); context. lineTo (0, end);} context. closePath (); context. stroke (); context. restore ();} // specifies the Second-in-Second Method for painting. 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 design JavaScript programs.