<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Canvas Clock</title> <style> .clocks { height: 500px; margin: 25px auto; position: relative; width: 500px; } </style> </head> <body> <div class="clocks"> <canvas id="clock" width="500" height="500"></canvas> </div> <script> // Create a Canvas object using the Canvas element var oClock = document.getelementById ('clock'); // Create a 2D drawing object for the Canvas. Var CTX = oclock. getContext(" 2D "); Var width = ctx.canvas. Width; Var height = ctx.canvas. Height; Var r = width / 2; Var rem = width / 200; Function drawBackground() {ctx.save(); // remap position (0,0) (drawing object) to the center of the canvas ctx.translate(r, r); /* / start a path, or reset the current path. ctx.beginPath(); // lineWidth ctx.lineWidth = 10 * rem; Arc (0, 0, r-ctx. LineWidth / 2, 0, 2* math.pi, false); ctx.stroke(); */ var hourNumber = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]; // Sets or returns the current font properties for the text content. ctx.font = 18 * rem + 'px Arial'; // Sets or returns the current alignment of the text content. Center The center of the text is placed at the specified position. ctx.textAlign = 'center'; // Sets or returns the current text baseline to use when drawing text. The middle text baseline is the middle of the EM box. ctx.textBaseline = 'middle'; Hournumber. forEach(function(number, I) {var rad = 2 * math. PI / 12 * I; Var x = math.cos (rad) * (r-30 * rem); var y = Math.sin(rad) * (r - 30 * rem); ctx.fillText(number, x, y); }); For (var I = 0; i < 60; i++) { var rad = 2 * Math.PI / 60 * i; Var x = math.cos (rad) * (r-18 * rem); var y = Math.sin(rad) * (r - 18 * rem); ctx.beginPath(); // If (I % 5 === 0) {ctx.fillstyle = '#000'; Arc (x, y, 2* rem, 0, 2* math.pi, false); } else { ctx.fillStyle = '#ccc'; ctx.arc(x, y, 2 * rem, 0, 2, 2 * Math.PI, false); } // Fill the current drawing path ctx.fill(); Function drawHour(hour, minute) {ctx.save(); function drawHour(hour, minute) {ctx.save(); ctx.beginPath(); var rad = 2 * Math.PI / 12 * hour; Var mrad = 2 * Math.PI / 1 * Math. Rotate (rad + mrad); rotate(rad + mrad); // Sets or returns the current line width. ctx.lineWidth = 6; // lineCap sets or returns the end point style of the line. Round Adds a round cap to each end of the line. ctx.lineCap = 'round'; // Move the path to the specified point on the canvas without creating a line. ctx.moveTo(0, 10 * rem); // Add a new point, and then create a line on the canvas from that point to the last specified point. ctx.lineTo(0, -r / 2); // Draw a defined path. ctx.stroke(); // Returns the previously saved path status and properties. ctx.restore(); Function drawMinute(minute) {ctx.save(); function drawMinute(minute) {ctx.save(); ctx.beginPath(); var rad = 2 * Math.PI / 60 * minute; ctx.rotate(rad); ctx.lineWidth = 3 * rem; // round Adds a round cap to each end of the line. ctx.lineCap = 'round'; ctx.moveTo(0, 10); ctx.lineTo(0, -r + 30 * rem); ctx.stroke(); ctx.restore(); } function drawSecond(second) {ctx.save(); ctx.beginPath(); ctx.fillStyle = '#0f0'; var rad = 2 * Math.PI / 60 * second; ctx.rotate(rad); ctx.moveTo(-2, 20 * rem); ctx.lineTo(2, 20 * rem); ctx.lineTo(1, -r + 18 * rem); ctx.lineTo(-1, -r + 18 * rem); ctx.fill(); ctx.restore(); Function drawDot() {ctx.beginPath(); function drawDot() {ctx.beginPath(); ctx.fillStyle = '#fff'; Arc (0, 0, 3 * rem, 0, 2* math.pi, false); arc(0, 0, 3 * rem, 0, 2* math.pi, false); ctx.fill(); } function draw() {// Clear the previous style and redraw ctx.clearRect(0, 0, width, height); Var now = new Date(); var hour = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds(); drawBackground(); drawHour(hour, minutes); drawMinute(minutes); drawSecond(seconds); drawDot(); ctx.restore(); } // setInterval() executes setInterval(draw, 1000) every second; </script> </body> </ HTML >Copy the code