Canvas clock,

Canvas clock,

First step.

<canvas id="myCanvas" style="border:1px red solid" width="300px"; height="300px";></canvas>

Then

 var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d");

 

Define a function that draws a clock every second by using a timer. By default, a function name is called once and then called by a timer. Because if you start calling the timer directly, it will be 1 s slower than the actual time.

drawfun();setInterval(drawfun,1000);

 

Function body content:

1). Clear the canvas once before each call, so put it in the first line.

// Clear the canvas ctx. clearRect (0, 0,300,300 );

2) Draw the outer border and circle of the clock, which is easy to explain.

// The hour frame and the center ctx. beginPath (); ctx. arc (150,150,100, * Math. PI); ctx. stroke (); ctx. beginPath (); ctx. fillStyle = "black"; ctx. arc (150,150, 2 * Math. PI); ctx. fill ();

3). Draw the hour and minute scales.

// Draw the time scale for (var I = 0; I <60; I ++) {ctx. save (); ctx. beginPath (); // Let the canvas use the center of the center as the origin ctx. translate (150,150); // angle between seconds ctx. rotate (Math. PI * 2/60 * I); // start to draw the scale ctx. moveTo (0,-99); // clock scale if (I % 5 = 0) {ctx. strokeStyle = '#333'; ctx. lineWidth = 3; ctx. lineTo (0,-87);} else {// ctx in minutes. strokeStyle = '# ccc'; ctx. lineWidth = 2; ctx. lineTo (0,-90);} ctx. stroke (); ctx. closePath (); ctx. restore ();}

4). Drawing hours

// Drawing hours for (var I = 0; I <60; I ++) {ctx. beginPath (); // obtain the coordinate var hudu = (2 * Math. PI/360) * 6 * I; var X = 150 + Math. sin (hudu) * 80-3.5; var Y = 150-Math. cos (hudu) * 80 + 5; // note that "-" is used here, because the Y we want is relative. If (I % 5 = 0) {if (I = 0) {ctx. fillText ("12", X-3, Y);} else {ctx. fillText ("" + I/5 + "", X, Y);} ctx. stroke ();}}

5). Draw the pointer of the hour, minute, and second at last.

Var date = new Date (); var Hour = date. getHours (); // obtain the hour (0-23) var Minute = date. getMinutes (); // get the number of minutes (0-59) var Second = date. getSeconds (); // obtain the number of seconds (0-59) // draw the ctx in seconds. save (); ctx. beginPath (); // modify the canvas origin, with the center as the origin ctx. translate (150,150); // pointer rotation per second ctx. rotate (Math. PI * 2/60 * Second); ctx. strokeStyle = 'red'; ctx. lineWidth = 1; ctx. moveTo (0, 20); ctx. lineTo (0,-70); ctx. stroke (); ctx. closePath (); ctx. Restore (); // draw ctx in minutes. save (); ctx. beginPath (); ctx. translate (150,150); // The angle of the current minute plus the angle of minute rotation per second. If you do not add a minute, ctx is rotated only when the minute passes the entire minute. rotate (Math. PI * 2/60 * Minute + Math. PI * 2/60/60 * Second); ctx. strokeStyle = 'black'; ctx. lineWidth = 1.5; ctx. moveTo (0, 10); ctx. lineTo (0,-60); ctx. stroke (); ctx. closePath (); ctx. restore (); // draw the clock ctx. save (); ctx. beginPath (); ctx. translate (150,150); // The same as the minute. Ctx. rotate (Math. PI * 2/12 * Hour + Math. PI * 2/60/12 * Minute + Math. PI * 2/60/60/12 * Second); ctx. strokeStyle = 'black'; ctx. lineWidth = 2.5; ctx. moveTo (0, 8); ctx. lineTo (0,-35); ctx. stroke (); ctx. closePath (); ctx. restore ();

I also started to learn canvas. If any, please forgive me and point out. Thank you!