Este artigo compartilhou o código específico para usar a tela para desenhar o relógio para sua referência. O conteúdo específico é o seguinte
1. Clock.html
<! doctype html> <html lang = "pt"> <head> <meta charset = "utf-8"> <meta name = "description" content = ""> <title> clovas </title> </head> <body> <canvas id = "canvas"> </canvas> <script> warlVsLsAs " var context = Canvas.getContext ('2D'); //empate(); função draw () {// Obtenha o tempo, o minuto e o segundo do sistema atual var agora = new Date (); var sec = agora.getSeconds (); var min = agora.getminutes (); var hour = agora.gethours (); hora> = 12 && (hora = hora-12); VAR RADIUS = MATH.MIN (Canvas.Width/2, Canvas.Height/2); // Inicialize o 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 (); // Table Box // Hour Scale Context.strokestyle = "Black"; context.fillstyle = "preto"; context.LineWidth = 3; context.linecap = "redond"; context.BeginPath (); for (var i = 0; i <12; i ++) {context.rotate (math.pi/6); context.moveto (Radius-30,0); context.lineto (raio-10,0); } context.stroke (); context.restore (); context.Save (); // Minuto Scale Context.LineWidth = 2; context.BeginPath (); for (var i = 0; i <60; i ++) {if (! i%5 == 0) {context.moveto (raio-15,0); context.lineto (raio-10,0); } context.rotate (math.pi/30); } context.stroke (); context.restore (); context.Save (); // desenhe o contexto da mão da hora.rotate ((math.pi/6)*hora+(math.pi/360)*min+(math.pi/21600)*seg); context.LineWidth = 6; context.BeginPath (); context.moveto (-10,0); context.lineto (raio*0,5,0); context.stroke (); context.restore (); context.Save (); context.rotate ((Math.pi/30)*min+(Math.pi/1800)*seg); context.strokestyle = "#29A8DE"; context.LineWidth = 4; context.linecap = "butt"; context.BeginPath (); context.moveto (-20,0); context.lineto (raio*0,7,0); context.stroke (); context.restore (); context.Save (); context.rotate (sec*math.pi/30); context.strokestyle = "vermelho"; context.LineWidth = 2; context.linecap = "butt"; context.BeginPath (); context.moveto (-30,0); context.lineto (raio*0,9,0); context.stroke (); context.restore (); context.Save (); context.LineWidth = 4; context.strokestyle = "Gray"; context.BeginPath (); context.arc (0,0, raio, 0, math.pi*2, verdadeiro); context.stroke (); context.restore (); context.restore (); context.restore (); } window.onload = function () {setInterval (desenhar, 1000)} </script> </body> </html>2. Código JavaScript
<cript> var Canvas = document.getElementById ("Canvas"); var context = Canvas.getContext ('2D'); //empate(); função draw () {// Obtenha a hora e as atas do sistema atual var agora = new Date (); var sec = agora.getSeconds (); var min = agora.getminutes (); var hour = agora.gethours (); hora> = 12 && (hora = hora-12); VAR RADIUS = MATH.MIN (Canvas.Width/2, Canvas.Height/2); // inicialize o 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 (); // Table Box // Hour Scale Context.strokestyle = "Black"; context.fillstyle = "preto"; context.LineWidth = 3; context.linecap = "redond"; context.BeginPath (); for (var i = 0; i <12; i ++) {context.rotate (math.pi/6); context.moveto (Radius-30,0); context.lineto (raio-10,0); } context.stroke (); context.restore (); context.Save (); // Minuto Scale Context.LineWidth = 2; context.BeginPath (); for (var i = 0; i <60; i ++) {if (! i%5 == 0) {context.moveto (raio-15,0); context.lineto (raio-10,0); } context.rotate (math.pi/30); } context.stroke (); context.restore (); context.Save (); // desenhe o contexto da mão da hora.rotate ((math.pi/6)*hora+(math.pi/360)*min+(math.pi/21600)*seg); context.LineWidth = 6; context.BeginPath (); context.moveto (-10,0); context.lineto (raio*0,5,0); context.stroke (); context.restore (); context.Save (); context.rotate ((Math.pi/30)*min+(Math.pi/1800)*seg); context.strokestyle = "#29A8DE"; context.LineWidth = 4; context.linecap = "butt"; context.BeginPath (); context.moveto (-20,0); context.lineto (raio*0,7,0); context.stroke (); context.restore (); context.Save (); context.rotate (sec*math.pi/30); context.strokestyle = "vermelho"; context.LineWidth = 2; context.linecap = "butt"; context.BeginPath (); context.moveto (-30,0); context.lineto (raio*0,9,0); context.stroke (); context.restore (); context.Save (); context.LineWidth = 4; context.strokestyle = "Gray"; context.BeginPath (); context.arc (0,0, raio, 0, math.pi*2, verdadeiro); context.stroke (); context.restore (); context.restore (); context.restore (); } window.onload = function () {setInterval (desenho, 1000)} </script>O exposto acima é tudo sobre este artigo, espero que seja útil para todos aprenderem a programação de JavaScript.