Este artículo ha compartido el código específico para usar lienzo para dibujar el reloj para su referencia. El contenido específico es el siguiente
1. Clock.html
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "descripción" content = ""> <title> canvas clock </title> </head> <body> <canvas id = "canvas"> </levas> <script> var canvas = document.getelementbyid ("" Canvas "); var context = Canvas.getContext ('2d'); //dibujar(); function draw () {// Obtenga el tiempo, el minuto y el segundo del sistema actual var ahora = new Date (); var sec = ahora.getSeconds (); var min = ahora.getminutes (); var hora = ahora.gethours (); hora> = 12 && (hora = hora-12); var radio = math.min (Canvas.Width/2, Canvas.Height/2); // Inicializar Canvas context.save (); context.ClearRect (0,0, Canvas.Width, Canvas.Height); context.translate (Canvas.Width/2, Canvas.Height/2); context.rotate (-math.pi/2); context.save (); // cuadro de tabla // Hour Scale context.strokestyle = "Black"; context.fillstyle = "negro"; context.linewidth = 3; context.lineCap = "Round"; context.beginPath (); for (var i = 0; i <12; i ++) {context.rotate (math.pi/6); context.moveto (radio-30,0); context.lineto (radio-10,0); } context.stroke (); context.restore (); context.save (); // contexto de escala de minuto.linewidth = 2; context.beginPath (); para (var i = 0; i <60; i ++) {if (! i%5 == 0) {context.moveto (radio-15,0); context.lineto (radio-10,0); } context.rotate (math.pi/30); } context.stroke (); context.restore (); context.save (); // Dibuja el contexto de la mano de la hora.rotate ((math.pi/6)*hora+(math.pi/360)*min+(math.pi/21600)*sec); context.linewidth = 6; context.beginPath (); context.moveto (-10,0); context.lineto (radio*0.5,0); context.stroke (); context.restore (); context.save (); context.rotate ((math.pi/30)*min+(math.pi/1800)*sec); context.strokestyle = "#29a8de"; context.linewidth = 4; context.lineCap = "Butt"; context.beginPath (); context.moveto (-20,0); context.lineto (radio*0.7,0); context.stroke (); context.restore (); context.save (); context.rotate (sec*Math.pi/30); context.strokestyle = "rojo"; context.linewidth = 2; context.lineCap = "Butt"; context.beginPath (); context.moveto (-30,0); context.lineto (radio*0.9,0); context.stroke (); context.restore (); context.save (); context.linewidth = 4; context.strokestyle = "gris"; context.beginPath (); context.arc (0,0, radio, 0, math.pi*2, true); context.stroke (); context.restore (); context.restore (); context.restore (); } window.Onload = function () {setInterval (dibujo, 1000)} </script> </body> </html>2. Código JavaScript
<script> var canvas = document.getElementById ("Canvas"); var context = Canvas.getContext ('2d'); //dibujar(); function draw () {// Obtenga el tiempo y los minutos del sistema actual var ahora = new Date (); var sec = ahora.getSeconds (); var min = ahora.getminutes (); var hora = ahora.gethours (); hora> = 12 && (hora = hora-12); var radio = math.min (Canvas.Width/2, Canvas.Height/2); // Inicializar el context.save (); context.ClearRect (0,0, Canvas.Width, Canvas.Height); context.translate (Canvas.Width/2, Canvas.Height/2); context.rotate (-math.pi/2); context.save (); // cuadro de tabla // Hour Scale context.strokestyle = "Black"; context.fillstyle = "negro"; context.linewidth = 3; context.lineCap = "Round"; context.beginPath (); for (var i = 0; i <12; i ++) {context.rotate (math.pi/6); context.moveto (radio-30,0); context.lineto (radio-10,0); } context.stroke (); context.restore (); context.save (); // contexto de escala de minuto.linewidth = 2; context.beginPath (); para (var i = 0; i <60; i ++) {if (! i%5 == 0) {context.moveto (radio-15,0); context.lineto (radio-10,0); } context.rotate (math.pi/30); } context.stroke (); context.restore (); context.save (); // Dibuja el contexto de la mano de la hora.rotate ((math.pi/6)*hora+(math.pi/360)*min+(math.pi/21600)*sec); context.linewidth = 6; context.beginPath (); context.moveto (-10,0); context.lineto (radio*0.5,0); context.stroke (); context.restore (); context.save (); context.rotate ((math.pi/30)*min+(math.pi/1800)*sec); context.strokestyle = "#29a8de"; context.linewidth = 4; context.lineCap = "Butt"; context.beginPath (); context.moveto (-20,0); context.lineto (radio*0.7,0); context.stroke (); context.restore (); context.save (); context.rotate (sec*Math.pi/30); context.strokestyle = "rojo"; context.linewidth = 2; context.lineCap = "Butt"; context.beginPath (); context.moveto (-30,0); context.lineto (radio*0.9,0); context.stroke (); context.restore (); context.save (); context.linewidth = 4; context.strokestyle = "gris"; context.beginPath (); context.arc (0,0, radio, 0, math.pi*2, true); context.stroke (); context.restore (); context.restore (); context.restore (); } window.onload = function () {setInterval (dibujo, 1000)} </script>Lo anterior se trata de este artículo, espero que sea útil para todos aprender la programación de JavaScript.