ตัวอย่างบทความนี้อธิบายวิธีการของ JS+HTML5 เพื่อวาดเว็บนาฬิกา มันวาดนาฬิกาด้วยลูกตุ้มที่สามารถใช้บนหน้าเว็บ มันสามารถปรับขนาดและตำแหน่งผ่านปุ่ม เนื้อหาการใช้งานเฉพาะมีดังนี้
<html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> นาฬิกา </title> <script type = "text/javascript"> var xclock = 300; // ตำแหน่งกลาง var yclock = 250; // ตำแหน่งกลาง var d = 180.0; // รัศมีกลางของวงกลมนาฬิกาค่าพื้นผิว var var = -d*1.07; ฟังก์ชั่นขยาย () {d ++;} ฟังก์ชั่นลด () {d-;} ฟังก์ชั่นไปทางทิศตะวันตก () {var c = document.getElementById ("mycanvas"); var g2d = c.getContext ("2d"); G2D.Translate (-1,0); // ตั้งค่าที่มาของแกนที่กึ่งกลางของตาราง c = document.getElementById ("mypendulum"); g2d = c.getContext ("2d"); G2D.Translate (-1,0); // ตั้งค่าแหล่งกำเนิดแกนที่กึ่งกลางของตาราง c = document.getElementById ("Mycanvas"); var g2d = c.getContext ("2d"); G2D.Translate (1,0); // ตั้งค่าที่มาของแกนที่กึ่งกลางของตาราง c = document.getElementById ("mypendulum"); g2d = c.getContext ("2d"); G2D.Translate (1,0); // ตั้งค่าแกนเกิดขึ้นที่กึ่งกลางของฟังก์ชันตาราง} ขึ้นไปด้านบน () {var c = document.getElementById ("mycanvas"); var g2d = c.getContext ("2d"); G2D.Translate (0, -1); // ตั้งค่าแกนเกิดขึ้นที่กึ่งกลางของตาราง c = document.getElementById ("mypendulum"); g2d = c.getContext ("2d"); G2D.Translate (0, -1); // ตั้งค่าแกนเกิดขึ้นที่กึ่งกลางของตาราง} ฟังก์ชั่นลง () {var c = document.getElementById ("mycanvas"); var g2d = c.getContext ("2d"); G2D.Translate (0,1); // ตั้งค่าแกนเกิดขึ้นที่กึ่งกลางของตาราง c = document.getElementById ("mypendulum"); g2d = c.getContext ("2d"); G2D.Translate (0,1); // ตั้งค่าแกนเกิดขึ้นที่กึ่งกลางของตาราง} ฟังก์ชัน fillpolygon (a, b, fillcolor, ctx) {ctx.beginpath (); ctx.moveto (a [0], b [0]); สำหรับ (var j = 1; j <a.length; j ++) ctx.lineto (a [j], b [j]); ctx.closepath (); ctx.fillstyle = fillcolor; ctx.fill (); Math.floor (Math.random ()*16) .tostring (16); return s;} function locatecoordine () {var c = document.getElementById ("mycanvas"); var g2d = c.getContext ("2d"); G2D.Translate (XCLOCK, YCLOCK); // ตั้งค่าแกนพิกัดมาที่ศูนย์กลางของตาราง var c = document.getElementById ("mypendulum"); var g2d = c.getContext ("2d"); G2D.Translate (XCLOCK, YCLOCK); // ตั้งค่าแกนพิกัดมาที่จุดศูนย์กลางของตาราง} ฟังก์ชั่น DrawFace () {// กำหนดวิธีการวาดบนพื้นผิวของนาฬิกา/* อาร์เรย์ขนาดเล็กของพิกัดจุดยอดเพชรที่เป็นตัวแทน 1, 2, 4, 5, 7, 8, 10, 11 var y = อาร์เรย์ใหม่ (math.round (-d*1.07),-d, math.round (-d*0.9),-d);/*อาร์เรย์ของพิกัดจุดยอดที่มีขนาดใหญ่กว่าซึ่งแสดงตำแหน่ง 3, 6, 9 และ 12 นาฬิกา Array (Math.Round (-D*1.13),-D, Math.Round (-D*0.9),-D); var c = document.getElementById ("MyCanvas"); var g2d = c.getContext ("2d"); // entarmpath (); g2d.arc (0,0, d, 0, 2*math.pi); g2d.strokestyle = "Lightgray"; g2d.lineWidth = d/18; g2d.stroke (); // จังหวะสุดท้ายวาดขอบของวงกลมนาฬิกา // เริ่มเตรียมที่จะวาดเพชรที่แสดงในแต่ละชั่วโมงสำหรับ (var i = 0; i <12; i ++) {// สำหรับร่างกายลูปของคำสั่งลูปเริ่มต้นถ้า (i%3 == 0) {// วาดเพชรสีแดงขนาดใหญ่ขึ้น } else {// วาดเพชรสีส้มเล็ก ๆ เพื่อแสดงถึงชั่วโมงที่เหลือ Fillpolygon (x, y, "สีส้ม", g2d); } // ใช้กึ่งกลางของนาฬิกาเป็นแหล่งกำเนิดและระบบพิกัดจะหมุนตามเข็มนาฬิกา 30 องศาเพื่อวาดเครื่องหมายเพชรของตำแหน่งชั่วโมงถัดไป g2d.rotate (math.pi/6.0); } // สำหรับการวนซ้ำของวงวนของคำสั่งลูป} // วิธีการวาดจุดสิ้นสุดของพื้นผิวนาฬิกา/ * วิธีสำหรับการกำหนดมือชั่วโมงมือนาทีและมือสองของนาฬิกาที่วาด * พารามิเตอร์อย่างเป็นทางการ hradian หน่วยเรเดียนหน่วยเรเดียนของมือเรเดียน เรเดียนเป็นตำแหน่งเรเดียนของมือสองที่คำนวณจาก 0 วินาที */ฟังก์ชั่น DrawNeedles (Hradian, Mradian, Sradian) {var c = document.getElementById ("mycanvas"); var g2d = c.getContext ("2d"); // ใช้เวลาตรงกลางนาฬิกา // จัดเรียงพิกัดที่เป็นตัวแทนของรูปหลายเหลี่ยมจุดยอดของ HORM HARD VAR HX = อาร์เรย์ใหม่ (0, Math.Round (D/19), 0, Math.Round (-D/19)); var hy = อาร์เรย์ใหม่ (math.round (-d/2), math.round (-d/3), 0, math.round (-d/3)); Fillpolygon (hx, hy, "magenta", g2d); // ตั้งมือชั่วโมงเป็นสีม่วงแดง // ใช้เวลาศูนย์นาฬิกาเป็นแหล่งกำเนิดและหมุนเรเดียน Hradian ทวนเข็มนาฬิกาเพื่อคืนค่าระบบพิกัด G2D.rotate (-hradian); // ใช้เวลาตรงกลางนาฬิกาเป็นจุดกำเนิดและหมุน mradian radian ตามเข็มนาฬิกาเพื่อวาดมือนาที g2d.rotate (mradian); // อาร์เรย์พิกัดที่เป็นตัวแทนของรูปหลายเหลี่ยมจุดสุดยอดของมือนาที var mx = อาเรย์ใหม่ (math.round (-d/19), 0, math.round (d/19); var my = array ใหม่ (0, math.round (-d/1.3), 0); Fillpolygon (mx, my, "grey", g2d); // ตั้งค่ามือนาทีเป็นสีเทา // ใช้นาฬิกาเป็นจุดกำเนิดและระบบพิกัดจะหมุน Mradian เรเดียนทวนเข็มนาฬิกาเพื่อกู้คืนระบบพิกัด G2D.rotate (-Mradian); // ใช้นาฬิกาเป็นจุดกำเนิดและระบบพิกัดหมุนเรเดียนของศรีราศีศาสตร์ตามเข็มนาฬิกาเพื่อวาดมือสอง G2D.rotate (ศรีราเดีย); // มือสองไปยังสีแบบสุ่ม g2d.strokestyle = 'สีเขียว'; g2d.lineWidth = "1"; g2d.moveto (0,0); g2d.lineto (0, math.round (-d/1.1)); g2d.stroke (); g2d.beginpath (); g2d.arc (0, math.round (-d), d/18, 0, 2*math.pi); g2d.fillstyle = randomColor (); g2d.fill (); // สำหรับจังหวะสุดท้ายให้วาดลูกบอลเล็ก ๆ ที่จุดสุดยอดของมือที่สอง // ใช้กึ่งกลางของนาฬิกาเป็นจุดกำเนิดและหมุนเรเดียนเรเดียนทวนเข็มนาฬิกา Sradian เพื่อคืนค่าระบบพิกัด G2D.rotate (-Sradian); } // บล็อกโค้ดของวิธีการวาดแบบเข็มวาด/* วาดสตริงเพื่อแสดงเวลาทันที*/ฟังก์ชั่น drawtime () {var time = new Date (); // รับเวลาปัจจุบัน var hour = time.getHours (); // รับชั่วโมง var นาที = time.getMinutes (); // รับนาที var second = time.getSeconds (); // รับจำนวนวินาที var apm = "am"; // การแสดงผลเริ่มต้นตอนเช้า: AM var canvas = document.getElementById ("Mycanvas"); var g2d = canvas.getContext ("2d"); ถ้า (ชั่วโมง> 12) {// หยุดแสดงชั่วโมง = ชั่วโมง -12; APM = "PM"; } ถ้า (นาที <10) {// ถ้ามีเพียง 1 หลักในนาทีให้เพิ่ม 0 เพื่อแสดงนาที = "0"+นาที; } ถ้า (วินาที <10) {// ถ้าจำนวนวินาทีเพียง 1 หลักเพิ่ม 0 เพื่อแสดงวินาที = "0"+วินาที; } G2D.ClearRect (-xClock, -yClock, 600,600); // ทำความสะอาดหน้าจอ var s = ชั่วโมง+":"+นาที+":"+วินาที+":"+apm; g2d.fillstyle = "สีแดง"; g2d.font = d/4+ "px kaiti"; g2d.filltext (s, -d/1.8, d*1.4); g2d.font = d/4 + "px kaiyi"; // สร้าง gradientvar gradient = g2d.createlineargradient (0,0, canvas.width, 0); gradient.addcolorstop ("0", "magenta"); gradient.addcolorstop ("0.5", "blue"); gradient.addcolorstop ("1.0", "); gradientg2d.fillstyle = gradient; g2d.filltext ("ข้อมูลขนาดใหญ่",-d/2.6, d/2); // ได้รับการอ่านครั้งที่สองของช่วงเวลาการสร้างอินสแตนซ์และคำนวณการอ่านส่วนโค้งของมือที่สองเทียบกับ 0 วินาที, var c = math.pi/30 * วินาที; // รับการอ่านนาทีของช่วงเวลาการสร้างและคำนวณการอ่านส่วนโค้งของมือนาที, var b = math.pi/30 * นาที;/ * รับการอ่านชั่วโมงของช่วงเวลาการสร้างและคำนวณการอ่านส่วนโค้งของมือชั่วโมงเทียบกับ 0 คะแนนและคำนวณการอ่านส่วนโค้งของการอ่านส่วนโค้งของมือชั่วโมง * ระดับของเรเดียนที่มือเดินชั่วโมงเป็นจุดชั่วโมง (30 องศาต่อชั่วโมง) บวกกับค่าการแก้ไขของจำนวนนาทีที่ผ่าน*/var a = math.pi/180* (30* ชั่วโมง + นาที/2);/* ระบบพิกัดถูกแปล (xclock, yclock) DrawNeedles (A, B, C); } // จุดสิ้นสุดบล็อกรหัสของวิธีการ drawtime var i = 0; pendulum function () {// pendulum_bobvar instantang อาร์เรย์ (64,61,56,49,40,29,16,3, -8, -16, -29, -40, -49, -56, -61, -64, -29, -29, -40, -49, -49, -56, -61, -64, 64, -64, -61, -56, -49, -40, -29, -16, -8,3,16,29,40,49,56,61,64,64); // อาร์เรย์มุมเรียลไทม์ของลูกตุ้ม var c = document.getElementById ("mypendulum"); var ctx = c.getContext ("2d"); var alpha = instantangle [i ++%instantang.length]*math.pi/180; ctx.clearrect // ตั้งมือสองเป็นสีแบบสุ่ม ctx.fillstyle = 'บราวน์'; ctx.fillrect (-3,0,6, d*1.4); ctx.shadowblur = 20; ctx.shadowcolor = "black"; ctx.fillstyle = "blue"; // ctx.fillrect (-d/3.5, d*1.35, d/1.6, d/4.4); ctx.font = "40px kaiyi"; // สร้าง gradientvar gradient = ctx.createlineargradient (0,0, c.width, 0); gradient.addcolorstop ("0", "magenta"); gradient.addcolorstop ("0.5", "); เติมด้วย gradient // ctx.fillstyle = การไล่ระดับสี; ctx.fillstyle = "สีแดง"; ctx.filltext ("ข้อมูลขนาดใหญ่",-d/3.2, d*1.55); ctx.shadowblur = 0; ctx.shadowcolor = null; ctx.fillstyle = null; ctx.rotate (-alpha); } การเตรียมฟังก์ชัน () {locateCoordine () setInterval ('drawtime ()', 500); setInterval ('pendulum ()', 200);} </script> <style> #MyCanvas {z-index: 3; ตำแหน่ง: สัมบูรณ์; ซ้าย: 0px; ด้านบน: 0px; } #MyPendulum {z-index: 2; ตำแหน่ง: สัมบูรณ์; ซ้าย: 0px; ด้านบน: 0px;}#controlpanel {ตำแหน่ง: สัมบูรณ์; ซ้าย: 600px; ด้านบน: 0px; ความกว้าง: 100px; TEXT-ALIGN: CENTER; Font-Family: "Kaiti"; ขนาดตัวอักษร: 20px; Font-Weight: ตัวหนา; สี:#6C0;} </style> </head> <body onload = "การเตรียมการ ()"> <canvas id = "mycanvas"> <p> เบราว์เซอร์ของคุณไม่รองรับองค์ประกอบผืนผ้าใบ! id = "controlpanel"> <table> <tr> <td> การควบคุม </td> <td> ปุ่ม </td> </tr> <td> <อินพุตค่า = "ขยาย" type = "ปุ่ม" onclick = "enlarge ()"> </button> </td> <td> <tr> <td> <ค่าอินพุต = "left" type = "ปุ่ม" onclick = "ไปทางทิศตะวันตก ()"> </button> </td> <td> <อินพุตค่า = "ขวา" พิมพ์ = "ปุ่ม" onClick = "eastwards ()"> </td> </td> </tr> <tr> <td> onclick = "ขึ้นไป ()"> </button> </td> <td> <ค่าอินพุต = "ลง" พิมพ์ = "ปุ่ม" onclick = "ลง ()"> </dot> </td> </tr> </table> </div>ภาพการทำซ้ำ:
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรมเว็บของทุกคน