Html5 draw clock, html5 draw

Html5 draw clock, html5 draw

Recently I am interested in Html5. I will use free time to do some small examples for exercises. Today I will draw a moving clock, as shown in:

The Code is as follows:

1 <script type = "text/javascript"> 2 3 // draw a circular radian, ctx indicates the drawing environment, x, y indicates the drawing center, and r indicates the drawing radius, st is the start radians, and end is the end radians. 4 function circle (ctx, x, y, r, st, end, w) {5 ctx. lineWidth = w; 6 ctx. beginPath (); 7 ctx. moveTo (x, y); 8 ctx. arc (x, y, r, st, end, true); 9 ctx. stroke (); 10} 11 12 // draw a white circle to cover 13 function circle0 (ctx, x, y, r, st, end) {14 ctx. fillStyle = "# ffffff"; 15 ctx. beginPath (); 16 ctx. arc (x, y, r, st, end, true); 17 ctx. fill (); 18} 19 function circle1 (ctx, x, y, r, st, end, w) {20 ctx. strokeStyle = "gray"; 21 ctx. lineWidth = w; 22 ctx. beginPath (); 23 ctx. arc (x, y, r, st, end, true); 24 ctx. stroke (); 25} 26 27 // line 28 function line (ctx, x1, y1, x2, y2, w) for clock plotting {29 if (w = 1) {30 ctx. strokeStyle = "red"; 31} else if (w = 2) {32 ctx. strokeStyle = "blue"; 33} else {34 ctx. strokeStyle = "black"; 35} 36 ctx. lineWidth = w; 37 ctx. beginPath (); 38 ctx. moveTo (x1, y1); 39 ctx. lineTo (x2, y2); 40 ctx. stroke (); 41} 42 function drawClock () {43 var c = document. getElementById ("myCanvas"); 44 var ctx = c. getContext ("2d"); 45 ctx. clearRect (0, 0, c. width, c. height); 46 // draw a clock 47 var cX = 300; 48 var cY = 200; 49 var radius = 100; 50 51 // plot the score and second scale 52 for (var I = 0; I <60; I ++) {53 circle (ctx, cX, cY, radius, I * 6 * Math. PI/180, (I + 1) * 6 * Math. PI/180, 1); 54} 55 circle0 (ctx, cX, cY, radius * 9/10, 0, 2 * Math. PI, true); 56 // draw time degree 57 for (var I = 0; I <12; I ++) {58 circle (ctx, cX, cY, radius, I * 30 * Math. PI/180, (I + 1) * 30 * Math. PI/180, 2); 59} 60 circle0 (ctx, cX, cY, radius * 8/10, 0, 2 * Math. PI, true); 61 62 // draw another circle 63 circle1 (ctx, cX, cY, radius * 11/10, 0, 2 * Math. PI, 1); 64 ctx. save (); 65 ctx. fillStyle = "black"; 66 ctx. font = "10px Arial"; 67 // draw the number 68 around the clock (var I = 0; I <12; I ++) {69 var fX = cX + Math. cos (I + 1) * 5*6 * Math. PI/180-Math. PI/2) * radius * 7.5/10; 70 var fY = cY + Math. sin (I + 1) * 5*6 * Math. PI/180-Math. PI/2) * radius * 7.5/10; 71 ctx. fillText (I + 1), fX, fY); 72} 73 var date = new Date (); 74 var second = date. getSeconds (); 75 var minute = date. getMinutes (); 76 var hour = date. getHours (); 77 hour = hour % 12; // use the 12-hour format 78 79 80 var secondX = cX + Math. cos (second * 6 * Math. PI/180-Math. PI/2) * radius * 9/10; 81 var secondY = cY + Math. sin (second * 6 * Math. PI/180-Math. PI/2) * radius * 9/10; 82 var minuteX = cX + Math. cos (minute * 6 * Math. PI/180-Math. PI/2) * radius * 8/10; 83 var minuteY = cY + Math. sin (minute * 6 * Math. PI/180-Math. PI/2) * radius * 8/10; 84 // for accuracy, add the radian 85 var hourX = cX + Math. cos (hour * 30 * Math. PI/180 + (minute * 6 * Math. PI/180)/12-Math. PI/2) * radius * 6.5/10; 86 var hourY = cY + Math. sin (hour * 30 * Math. PI/180 + (minute * 6 * Math. PI/180)/12-Math. PI/2) * radius * 6.5/10; 87 // draw the second needle, red 88 line (ctx, cX, cY, secondX, secondY, 1); 89 // draw the minute needle, blue 90 line (ctx, cX, cY, minuteX, minuteY, 2); 91 // painted hour hand, black 92 line (ctx, cX, cY, hourX, hourY, 3 ); 93 ctx. fillStyle = "black"; 94 ctx. font = "15px Arial"; 95 ctx. fillText ("CurrentTime is:" + date. toLocaleString (), 150,450); 96 ctx. save (); 97} 98 window. onload = function () {99 // loop, once every 1 s, and can only start after loading; otherwise, the exception 100 setInterval (drawClock, 1000) that cannot be found will occur ); 101} 102 </script>

View Code