Use HTML5 canvas for a clock. Use html5canvas for a clock.

Use HTML5 canvas for a clock. Use html5canvas for a clock.

For H5, canvas is one of its most distinctive features. With it, we can draw various images on the web page and make some games. The usage of the canvas label is also described in many tutorials on the Internet. Today we will use canvas for a small clock. Complete code can be found at https://github.com/wwervin72/html5-clock.

First, I used two canvases on this page. One is used to draw static clock disks and scales, and the other is used to draw three pointers of the clock. Then, I used positioning to overlap them. There is nothing to say here. The code is attached below.

<Canvas id = "plate"> dial </canvas> <canvas id = "needles"> hour </canvas>

Var plate = document. getElementById ('plate '); var needles = document. getElementById ('needles '); needles. setAttribute ('style', 'position: absolute; top: 8px; left: 8px; '); // The magin value of the body in chrome is 8px, so I didn't set it to 0 here. Var cntP = plate. getContext ('2d '); var cntH = needles. getContext ('2d '); plate. width = 800; plate. height = 500; needles. width = 800; needles. height = 500;

Now the preparation is complete, and the clock is ready to be drawn. I first defined a constructor for drawing the clock dial.

Function drawclock (cnt, radius, platelen, linewidth, numLen, NUMLEN) {this. cnt = cnt; this. radius = radius; this. platelen = platelen; this. linewidth = linewidth; this. numLen = numLen; this. NUMLEN = NUMLEN; this. getCalibCoor = function (I) {// obtain the coordinates of the two sides of the dial scale var X = 200 + this. radius * Math. sin (6 * I * Math. PI/180); var Y = 200-this.radius * Math. cos (6 * I * Math. PI/180); var x = 200 + (this. radius-this.platelen) * Math. sin (6 * I * Math. PI/180); var y = 200-(this. radius-this.platelen) * Math. cos (6 * I * Math. PI/180); // obtain the coordinate var numx = 200 + (this. radius-this.platelen-this.numLen) * Math. sin (6 * I * Math. PI/180); var numy = 200-(this. radius-this.platelen-this.numLen) * Math. cos (6 * I * Math. PI/180); // obtain the coordinate var numX = 200 + (this. radius-this.platelen-this.NUMLEN) * Math. sin (6 * I * Math. PI/180); var numY = 200-(this. radius-this.platelen-this.NUMLEN) * Math. cos (6 * I * Math. PI/180); return {X: X, Y: Y, x: x, y: y, numx: numx, numy: numy, numX: numX, numY: numY };}; this. drawCalibration = function () {// draw the scale for (var I = 0, coorObj; I <60; I ++) {coorObj = this. getCalibCoor (I); this. cnt. beginPath (); this. cnt. moveTo (coorObj. x, coorObj. y); this. cnt. lineTo (coorObj. x, coorObj. y); this. cnt. closePath (); this. cnt. lineWidth = this. linewidth; this. cnt. strokeStyle = '# ddd'; I % 5 = 0 & (this. cnt. strokeStyle = '# aaa') & (this. cnt. lineWidth = this. linewidth * 2); I % 15 = 0 & (this. cnt. strokeStyle = '#999') & (this. cnt. lineWidth = this. linewidth * 3); this. cnt. stroke (); this. cnt. font = '10px arial'; this. cnt. fillStyle = 'rgba (0, 0, 0 ,. 2) '; this. cnt. fillText (I, coorObj. numx-7, coorObj. numy + 3); I % 5 = 0 & (this. cnt. fillStyle = 'rgba (0, 0, 0 ,. 5) ') & (this. cnt. font = '18px arial') & (this. cnt. fillText (I/5, coorObj. numX-5, coorObj. numY + 5 ));}};}

Var clock = new drawclock (cntP, 5, 25); // instantiate a dial object
Clock. drawCalibration ();

The most important part here is to obtain the coordinates of the scale and number. I place the starting point of the scale on the edge of the dial, and subtract the Scale length from the dial radius to get the end point of the scale, then, use the angle and trigonometric function to obtain the coordinates of the two points. Finally, you can draw the dial scale. The same method is used to draw numbers on the dial. I am here. The dial is centered on (200,200. Now we have drawn a static clock dial.

Next I have defined a constructor for drawing clock pointers.

Function clockNeedle (cnt, R, lineWidth, strokeStyle, lineCap, obj) {this. R = R; this. cnt = cnt; this. lineWidth = lineWidth; this. strokeStyle = strokeStyle; this. lineCap = lineCap; this. obj = obj; this. getNeedleCoor = function (I) {var X = 200 + this. R * 0.8 * Math. sin (I); // The coordinate var Y = 200-this.R * 0.8 * Math. cos (I); var x = 200-20 * Math. sin (I); // The coordinate var y of the end point = 200 + 20 * Math. cos (I); return {X: X, Y: Y, x: x, y: y}; this. drawNeedle = function () {var d = new Date (). getTime (); var angle; switch (this. obj) {case 0: angle = (d/3600000% 24 + 8)/12*360 * Math. PI/180; break; case 1: angle = d/60000% 60/60*360 * Math. PI/180; break; case 2: angle = d/1000% 60/60*360 * Math. PI/180; break;} var coorobj = this. getNeedleCoor (angle); this. cnt. beginPath (); this. cnt. moveTo (coorobj. x, coorobj. y); this. cnt. lineTo (coorobj. x, coorobj. y); // this. cnt. closePath (); this. cnt. lineWidth = this. lineWidth; this. cnt. strokeStyle = this. strokeStyle; this. cnt. lineCap = this. lineCap; this. cnt. stroke ();}}

Here are two things to consider: 1. When we get the number of milliseconds in the current time and convert it to the hour, we calculate the number of hours in the current day for the 24 modulo, 8 is required. 2. If you want to use the lineCap attribute, do not use closePath () when setting the path above ().

Here we also need a method to draw the pointer and make the pointer look rotated:

Function draw () {cntH. clearRect (0, 0, needles. width, needles. height); var mzneedle = new clockNeedle (cntH, 200,1, 'rgba (0, 0, 0 ,. 5) ', 'round', 2); // The last parameter 0 indicates the hour hand, 1 indicates the minute hand, and 2 indicates the second hand var fzneedle = new clockNeedle (cntH, 'rgba (0, 0, 0 ,. 4) ', 'round', 0); var szneedle = new clockNeedle (cntH, 2, 'rgba (, 0, 0 ,. 3) ', 'round', 1); mzneedle. drawNeedle (); fzneedle. drawNeedle (); szneedle. drawNeedle (); cntH. arc (200,200, 2 * Math. PI); cntH. fillStyle = 'rgba (0, 0, 0 ,. 5) '; cntH. fill ();} setInterval (draw, 1 );

The image of the clock is attached below: