Artikel ini telah membagikan kode spesifik untuk menggunakan Canvas untuk menggambar jam untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
1. Clock.html
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "description" content = ""> <itement> canvas clock </iteme> </head> <body> <canvas id = "canvas"> </canvas> </head> <body> <canvas id = "canvas"> </canvas> <cript> var canvas =. var context = canvas.getContext ('2d'); //menggambar(); function draw () {// Dapatkan waktu, menit dan kedua dari sistem saat ini var sekarang = tanggal baru (); var sec = now.getSeconds (); var min = now.getMinutes (); var hour = now.getHours (); jam> = 12 && (jam = jam-12); var radius = math.min (canvas.width/2, canvas.height/2); // inisialisasi 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 (); // kotak tabel // jam skala konteks.strokestyle = "hitam"; context.fillstyle = "hitam"; context.linewidth = 3; context.linecap = "round"; context.beginpath (); untuk (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 (); // Konteks skala menit.linewidth = 2; context.beginpath (); untuk (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 (); // Gambarkan jam tangan konteks.rotate ((math.pi/6)*jam+(math.pi/360)*min+(math.pi/21600)*dtk); 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)*dtk); 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 = "merah"; 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 = "Grey"; 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)} </script> </body> </html>2. Kode JavaScript
<script> var canvas = document.getElementById ("canvas"); var context = canvas.getContext ('2d'); //menggambar(); function draw () {// Dapatkan waktu dan menit dari sistem saat ini var sekarang = tanggal baru (); var sec = now.getSeconds (); var min = now.getMinutes (); var hour = now.getHours (); jam> = 12 && (jam = jam-12); var radius = math.min (canvas.width/2, canvas.height/2); // inisialisasi konteks kanvas.save (); context.clearrect (0,0, canvas.width, canvas.height); context.translate (canvas.width/2, canvas.height/2); context.rotate (-math.pi/2); Context.Save (); // kotak tabel // jam skala konteks.strokestyle = "hitam"; context.fillstyle = "hitam"; context.linewidth = 3; context.linecap = "round"; context.beginpath (); untuk (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 (); // Konteks skala menit.linewidth = 2; context.beginpath (); untuk (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 (); // Gambarkan jam tangan konteks.rotate ((math.pi/6)*jam+(math.pi/360)*min+(math.pi/21600)*dtk); 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)*dtk); 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 = "merah"; 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 = "Grey"; 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)} </script>Di atas adalah semua tentang artikel ini, saya harap akan sangat membantu bagi semua orang untuk mempelajari pemrograman JavaScript.