JavaScript html5 canvas draws the clock effect, html5canvas

JavaScript html5 canvas draws the clock effect, html5canvas

This article describes how to draw a clock using JavaScript + html5 canvas. We will share this with you for your reference. The details are 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 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.
Articles you may be interested in:

 

 
  
The clock effect implemented by js that follows the mouse movement (Chinese and English date display)
 
  
Digital Clock Effect of page countdown implemented by JS
 
  
Js implementation Form bar display full format time clock effect code
 
  
Code for Olympics countdown clock effect implemented by js
 
  
Dynamic clock effect based on javascript
 
  
JavaScript html5 canvas