Cet article a partagé le code spécifique d'utilisation de Canvas pour dessiner l'horloge pour votre référence. Le contenu spécifique est le suivant
1. Clock.html
<! doctype html> <html lang = "en"> <éad> <meta charset = "utf-8"> <meta name = "Description" contenu = ""> <itle> canvas horloge </ title> </ head> <body> <canvas id = "canvas"> </ canvas> <script> var canevas = document.getElementyd (canvas "); var context = canvas.getContext ('2d'); //dessiner(); function draw () {// Obtenez l'heure, la minute et la seconde du système actuel var maintenant = new Date (); var sec = maintenant.getSeconds (); var min = now.getMinutes (); var hour = now.Gethours (); heure> = 12 && (hour = hour-12); var radius = math.min (canvas.width / 2, canvas.height / 2); // initialiser le contexte canvas.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 Boîte // Hour Échelle Context.strokestyle = "Black"; context.fillStyle = "Black"; context.linewidth = 3; context.lineCap = "Round"; context.beginPath (); pour (var i = 0; i <12; i ++) {context.rotate (math.pi / 6); context.moveto (rayon-30,0); context.lineto (RADIUS-10,0); } context.stroke (); context.Restore (); context.save (); // Context de l'échelle minute.Lelinewidth = 2; context.beginPath (); pour (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 (); // dessine le contexte de la main de l'heure.rotate ((math.pi / 6) * heure + (math.pi / 360) * min + (math.pi / 21600) * sec); context.linewidth = 6; context.beginPath (); context.moveto (-10,0); context.lineto (rayon * 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 (rayon * 0,7,0); context.stroke (); context.Restore (); context.save (); context.rotate (sec * math.pi / 30); context.strokestyle = "Red"; context.linewidth = 2; context.lineCap = "Butt"; context.beginPath (); context.moveto (-30,0); context.lineto (rayon * 0,9,0); context.stroke (); context.Restore (); context.save (); context.linewidth = 4; context.strokestyle = "gris"; context.beginPath (); context.arc (0,0, radius, 0, math.pi * 2, true); context.stroke (); context.Restore (); context.Restore (); context.Restore (); } window.onLoad = function () {setInterval (Draw, 1000)} </cript> </body> </html>2. Code javascript
<script> var canvas = document.getElementById ("canvas"); var context = canvas.getContext ('2d'); //dessiner(); function draw () {// Obtenez l'heure et les minutes du système actuel var maintenant = new Date (); var sec = maintenant.getSeconds (); var min = now.getMinutes (); var hour = now.Gethours (); heure> = 12 && (hour = hour-12); var radius = math.min (canvas.width / 2, canvas.height / 2); // Initialisez le contexte Canvas.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 Boîte // Hour Échelle Context.strokestyle = "Black"; context.fillStyle = "Black"; context.linewidth = 3; context.lineCap = "Round"; context.beginPath (); pour (var i = 0; i <12; i ++) {context.rotate (math.pi / 6); context.moveto (rayon-30,0); context.lineto (RADIUS-10,0); } context.stroke (); context.Restore (); context.save (); // Context de l'échelle minute.Lelinewidth = 2; context.beginPath (); pour (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 (); // dessine le contexte de la main de l'heure.rotate ((math.pi / 6) * heure + (math.pi / 360) * min + (math.pi / 21600) * sec); context.linewidth = 6; context.beginPath (); context.moveto (-10,0); context.lineto (rayon * 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 (rayon * 0,7,0); context.stroke (); context.Restore (); context.save (); context.rotate (sec * math.pi / 30); context.strokestyle = "Red"; context.linewidth = 2; context.lineCap = "Butt"; context.beginPath (); context.moveto (-30,0); context.lineto (rayon * 0,9,0); context.stroke (); context.Restore (); context.save (); context.linewidth = 4; context.strokestyle = "gris"; context.beginPath (); context.arc (0,0, radius, 0, math.pi * 2, true); context.stroke (); context.Restore (); context.Restore (); context.Restore (); } window.onload = function () {setInterval (draw, 1000)} </cript>Ce qui précède concerne cet article, j'espère qu'il sera utile pour tout le monde d'apprendre la programmation JavaScript.