บทความนี้ได้แชร์รหัสเฉพาะสำหรับการใช้ผ้าใบเพื่อวาดนาฬิกาสำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
1. clock.html
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "คำอธิบาย" content = ""> <title> นาฬิกาผืนผ้าใบ </title> </head> <body> var context = canvas.getContext ('2d'); //วาด(); ฟังก์ชั่นการวาด () {// รับเวลานาทีและที่สองของระบบปัจจุบัน var now = new date (); var sec = now.getSeconds (); var min = now.getMinutes (); var hour = now.getHours (); ชั่วโมง> = 12 && (ชั่วโมง = ชั่วโมง -12); var radius = math.min (canvas.width/2, canvas.height/2); // เริ่มต้นบริบท Canvas.save (); context.clearRect (0,0, Canvas.width, Canvas.height); Context.translate (Canvas.Width/2, Canvas.Height/2); context.rotate (-math.pi/2); บริบท save (); // กล่องตาราง // บริบทสเกลชั่วโมง strokestyle = "ดำ"; Context.fillstyle = "Black"; Context.lineWidth = 3; Context.linecap = "Round"; Context.BeginPath (); สำหรับ (var i = 0; i <12; i ++) {context.rotate (math.pi/6); Context.Moveto (RADIUS-30,0); Context.lineto (RADIUS-10,0); } context.stroke (); บริบท restore (); บริบท save (); // minute scale context.lineWidth = 2; Context.BeginPath (); สำหรับ (var i = 0; i <60; i ++) {ถ้า (! i%5 == 0) {context.moveto (RADIUS-15,0); Context.lineto (RADIUS-10,0); } context.rotate (math.pi/30); } context.stroke (); บริบท restore (); บริบท save (); // วาดบริบทมือชั่วโมงการค้า ((math.pi/6)*ชั่วโมง+(math.pi/360)*min+(math.pi/21600)*วินาที); Context.lineWidth = 6; Context.BeginPath (); Context.moveto (-10,0); Context.lineto (รัศมี*0.5,0); Context.stroke (); บริบท restore (); บริบท save (); context.rotate ((math.pi/30)*min+(math.pi/1800)*วินาที); Context.strokestyle = "#29a8de"; Context.lineWidth = 4; context.linecap = "ก้น"; Context.BeginPath (); Context.moveto (-20,0); Context.lineto (รัศมี*0.7,0); Context.stroke (); บริบท restore (); บริบท save (); บริบทการค้า (วินาที*math.pi/30); Context.strokestyle = "Red"; Context.lineWidth = 2; context.linecap = "ก้น"; Context.BeginPath (); Context.moveto (-30,0); Context.lineto (รัศมี*0.9,0); Context.stroke (); บริบท restore (); บริบท save (); Context.lineWidth = 4; Context.strokestyle = "Gray"; Context.BeginPath (); context.arc (0,0, รัศมี, 0, math.pi*2, true); Context.stroke (); บริบท restore (); บริบท restore (); บริบท restore (); } window.onload = function () {setInterval (วาด, 1000)} </script> </body> </html>2. รหัส JavaScript
<script> var canvas = document.getElementById ("Canvas"); var context = canvas.getContext ('2d'); //วาด(); ฟังก์ชั่นการวาด () {// รับเวลาและนาทีของระบบปัจจุบัน var now = new date (); var sec = now.getSeconds (); var min = now.getMinutes (); var hour = now.getHours (); ชั่วโมง> = 12 && (ชั่วโมง = ชั่วโมง -12); var radius = math.min (canvas.width/2, canvas.height/2); // เริ่มต้นบริบท Canvas.save (); context.clearRect (0,0, Canvas.width, Canvas.height); Context.translate (Canvas.Width/2, Canvas.Height/2); context.rotate (-math.pi/2); บริบท save (); // กล่องตาราง // บริบทสเกลชั่วโมง strokestyle = "ดำ"; Context.fillstyle = "Black"; Context.lineWidth = 3; Context.linecap = "Round"; Context.BeginPath (); สำหรับ (var i = 0; i <12; i ++) {context.rotate (math.pi/6); Context.Moveto (RADIUS-30,0); Context.lineto (RADIUS-10,0); } context.stroke (); บริบท restore (); บริบท save (); // minute scale context.lineWidth = 2; Context.BeginPath (); สำหรับ (var i = 0; i <60; i ++) {ถ้า (! i%5 == 0) {context.moveto (RADIUS-15,0); Context.lineto (RADIUS-10,0); } context.rotate (math.pi/30); } context.stroke (); บริบท restore (); บริบท save (); // วาดบริบทมือชั่วโมงการค้า ((math.pi/6)*ชั่วโมง+(math.pi/360)*min+(math.pi/21600)*วินาที); Context.lineWidth = 6; Context.BeginPath (); Context.moveto (-10,0); Context.lineto (รัศมี*0.5,0); Context.stroke (); บริบท restore (); บริบท save (); context.rotate ((math.pi/30)*min+(math.pi/1800)*วินาที); Context.strokestyle = "#29a8de"; Context.lineWidth = 4; context.linecap = "ก้น"; Context.BeginPath (); Context.moveto (-20,0); Context.lineto (รัศมี*0.7,0); Context.stroke (); บริบท restore (); บริบท save (); บริบทการค้า (วินาที*math.pi/30); Context.strokestyle = "Red"; Context.lineWidth = 2; context.linecap = "ก้น"; Context.BeginPath (); Context.moveto (-30,0); Context.lineto (รัศมี*0.9,0); Context.stroke (); บริบท restore (); บริบท save (); Context.lineWidth = 4; Context.strokestyle = "Gray"; Context.BeginPath (); context.arc (0,0, รัศมี, 0, math.pi*2, true); Context.stroke (); บริบท restore (); บริบท restore (); บริบท restore (); } window.onload = function () {setInterval (วาด, 1000)} </script>ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้การเขียนโปรแกรม JavaScript