Dieser Artikel hat den spezifischen Code für die Verwendung von Canvas zum Zeichnen der Uhr für Ihre Referenz geteilt. Der spezifische Inhalt ist wie folgt
1. Clock.html
<! docType html> <html Lang = "en"> <kopf> <meta charset = "utf-8"> <meta name = "Beschreibung" content = ""> <title> canvas clock </title> </head> <body> <canvas id = "canvas"> </canvas> <script> var var context = canvas.getContext ('2d'); //ziehen(); Funktion Draw () {// Erhalten Sie die Zeit, Minute und Sekunde des aktuellen Systems var = new Date (); var sec = now.getSeconds (); var min = now.getminutes (); var stound = now.gethours (); Stunde> = 12 && (Hour = Hour-12); var radius = math.min (canvas.width/2, canvas.height/2); // Canvas context.save () initialisieren; context.clearRect (0,0, canvas.width, canvas.height); context.translate (canvas.width/2, canvas.height/2); context.rotate (-math.pi/2); context.save (); // Tabellenbox // Hour Scale Context.strokestyle = "Black"; context.fillStyle = "schwarz"; context.linewidth = 3; context.lineecap = "rund"; context.beginPath (); für (var i = 0; i <12; i ++) {context.rotate (math.pi/6); context.moveto (radius-30,0); context.lineto (radius-10,0); } context.stroke (); context.restore (); context.save (); // Minute Scale Context.lineWidth = 2; context.beginPath (); für (var i = 0; i <60; i ++) {if (! i%5 == 0) {context.moveto (radius-15,0); context.lineto (radius-10,0); } context.rotate (math.pi/30); } context.stroke (); context.restore (); context.save (); // Zeichnen Sie den Stundenhandkontext.rotate ((math.pi/6)*Hour+(math.pi/360)*min+(math.pi/21600)*Sec); context.linewidth = 6; context.beginPath (); context.moveto (-10,0); context.lineto (Radius*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 (Radius*0,7,0); context.stroke (); context.restore (); context.save (); context.rotate (sec*math.pi/30); context.strokestyle = "rot"; context.linewidth = 2; context.linecap = "butt"; context.beginPath (); context.moveto (-30,0); context.lineto (Radius*0,9,0); context.stroke (); context.restore (); context.save (); context.lineWidth = 4; context.strokestyle = "grau"; context.beginPath (); context.arc (0,0, radius, 0, math.pi*2, true); context.stroke (); context.restore (); context.restore (); context.restore (); } window.onload = function () {setInterval (zeichnen, 1000)} </script> </body> </html>2. JavaScript -Code
<Script> var canvas = document.getElementById ("canvas"); var context = canvas.getContext ('2d'); //ziehen(); Funktion Draw () {// Erhalten Sie die Zeit und das Protokoll des aktuellen Systems var nun = new Date (); var sec = now.getSeconds (); var min = now.getminutes (); var stound = now.gethours (); Stunde> = 12 && (Hour = Hour-12); var radius = math.min (canvas.width/2, canvas.height/2); // initialisieren Sie den 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 (); // Tabellenbox // Hour Scale Context.strokestyle = "Black"; context.fillStyle = "schwarz"; context.linewidth = 3; context.lineecap = "rund"; context.beginPath (); für (var i = 0; i <12; i ++) {context.rotate (math.pi/6); context.moveto (radius-30,0); context.lineto (radius-10,0); } context.stroke (); context.restore (); context.save (); // Minute Scale Context.lineWidth = 2; context.beginPath (); für (var i = 0; i <60; i ++) {if (! i%5 == 0) {context.moveto (radius-15,0); context.lineto (radius-10,0); } context.rotate (math.pi/30); } context.stroke (); context.restore (); context.save (); // Zeichnen Sie den Stundenhandkontext.rotate ((math.pi/6)*Hour+(math.pi/360)*min+(math.pi/21600)*Sec); context.linewidth = 6; context.beginPath (); context.moveto (-10,0); context.lineto (Radius*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 (Radius*0,7,0); context.stroke (); context.restore (); context.save (); context.rotate (sec*math.pi/30); context.strokestyle = "rot"; context.linewidth = 2; context.linecap = "butt"; context.beginPath (); context.moveto (-30,0); context.lineto (Radius*0,9,0); context.stroke (); context.restore (); context.save (); context.lineWidth = 4; context.strokestyle = "grau"; context.beginPath (); context.arc (0,0, radius, 0, math.pi*2, true); context.stroke (); context.restore (); context.restore (); context.restore (); } window.onload = function () {setInterval (zeichnen, 1000)} </script>Das obige dreht sich alles um diesen Artikel. Ich hoffe, dass es für alle hilfreich sein wird, JavaScript -Programme zu lernen.