Use HTML5 canvas to write a clock

HTML5 is powerful enough to implement many functions. Painting a clock is just a joke. The image pointer can be implemented using the drawImage of ctx. As for compatibility issues, there are already many online solutions. This stuff is used for play, not for application. Learn the canvas API.

Effect demonstration

If you cannot see the demo, use a browser that supports HTML5.

Implementation Code

<Script type = "text/javascript"> // <! [CDATA [var time = new Date (); var h = time. getHours (); var m = time. getMinutes (); var s = time. getSeconds (); var weekday = {0: 'sunday', 1: 'monday', 2: 'tuesday', 3: 'weday', 4: 'thurday', 5: 'Friday', 6: 'saturday'}; h = h> 12? (H-12) * 5 + parseInt (m/12): h * 5 + parseInt (m/12 ); // initial position of the hour hand //================================================ ==== var x = 200, y = 200, sAngle = 0; // x y origin second point angle variable function draw () {var c = document. getElementById ("myCanvas"); var ctx = c. getContext ("2d"); ctx. clearRect (0, 0, c. width, c. height); s ++; // seconds // background ctx. fillStyle = '# eee' // Make changes to the settings ctx. globalAlpha = 0.8; ctx. fillRect (0, 0, c. width, c. height); // Draw a re Ctangle with new settings // === fill (indicating) origin === ctx. beginPath (); ctx. arc (x, y, 4, 8, true); ctx. fill (); ctx. closePath (); var grd = ctx. createLinearGradient (x, y, 50,350); grd. addColorStop (0, "# FF0000"); grd. addColorStop (0.5, "#00FF00"); grd. addColorStop (1, "# 0000FF"); ctx. fillStyle = grd; ctx. font = "20pt Arial"; ctx. fillText ("html5", 50,350); ctx. save (); // time scale for (var I = 0; I <60; I ++) {var angle = (Math. PI * 2)/60; ctx. beginPath (); Var B = I = 0 | I = 15 | I = 30 | I = 45 if (I % 5 = 0) {if (B) {ctx. fillStyle = "red"; radius = 6;} else {ctx. fillStyle = "blue"; radius = 4.5;} ctx. font = "12px Arial"; ctx. fillText (I/5 = 0? 12: I/5, x-5, y-80); // x large-right small-left y size digital scale} else {ctx. fillStyle = "#000"; radius = 2;} if (s = I) radius = radius + 1; ctx. arc (x, y-100, radius, 10, true); ctx. fill (); transform (ctx, x, y, angle, true);} ctx. restore (); // ===========================sangle = (Math. PI * 2)/60 * s; // second ctx. save (); // hour hand ctx. fillStyle = "red"; // ctx. strokeStyle = "red"; ctx. lineWidth = 2; transform (ctx, x, y, (Math. PI * 2)/60 * h, true); sj (ctx, x, y, x-8, y-30, x + 8 (Y-45); ctx. restore (); ctx. save (); // rotate ctx with a split needle. fillStyle = "blue"; ctx. lineWidth = 2; transform (ctx, x, y, (Math. PI * 2)/60 * m, true); sj (ctx, x, y, X-10, y-50, x + 10, y-65); ctx. restore (); // rotate ctx in seconds. save (); ctx. fillStyle = "#000"; transform (ctx, x, y, sAngle, true); sj (ctx, x, y, x-5, y-70, x + 5, y-80 ); ctx. restore (); // data sorting if (s % 60 = 0) {sAngle = 0, s = 0, m ++; if (m = 0) {// rotate if (m! = 0) h ++; if (m % 60 = 0) m = 0;} if (h % 60 = 0) h = 0 ;}; // * Note: if it is placed outside to determine whether the minute or the hour hand turns, the operation will be repeated when the condition is met. The reason is that each execution is performed again, and only the second hand changes at the time * // var dateString = time. getFullYear () + "year" + (time. getMonth () + 1) + "month" + time. getDate () + "day" + weekday [time. getDay ()] + "h:" + time. getHours () + "m:" + m + "s:" + s; document. getElementById ("d "). innerHTML = dateString;} // pointer triangle! Function sj (ctx, x, y, x1, y1, x2, y2) {// ============// ctx. beginPath (); // ctx. moveTo (x, y); // ctx. lineTo (x, y-30); // ctx. stroke (); // ctx. beginPath (); // ctx. moveTo (X-10, y-30); // ctx. lineTo (x + 10, y-30); // ctx. lineTo (x, y-30-10); // ctx. fill (); ctx. beginPath (); ctx. moveTo (x, y); ctx. lineTo (x, y1); ctx. stroke (); ctx. beginPath (); ctx. moveTo (x1, y1); ctx. lineTo (x2, y1); ctx. lineTo (x, y2); ctx. fill ();} // rotate function transform (ctx, x, y, angle, B) {if (B) {// clockwise ctx. transform (Math. cos (angle), Math. sin (angle),-Math. sin (angle), Math. cos (angle), x * (1-Math.cos (angle) + x * Math. sin (angle), y * (1-Math.cos (angle)-y * Math. sin (angle) }///==== execution per second ============== (Execution event optional) window. setInterval (function () {draw ()}, 1000); // window. onload = function () {// The effect is the same as above // setInterval ("draw ()", 1000); //}; //]> </script>