ก่อนอื่นเรามาดูผลกระทบของนาฬิกาอนุภาคกันก่อน ดังนี้:
ด้านล่างนี้เราจะใช้งานผ่าน canvas และ js
ขั้นแรก สร้างไฟล์ html และเพิ่มแคนวาส ดังนี้:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>เอกสาร</title> <style> .container{ ระยะขอบ: 0, อัตโนมัติ; ความกว้าง: 600px; ></หัว><body> <div id=container> <canvas id=canvas></canvas> </div></body>ถัดไป นำเข้าวัสดุ digit.js วัสดุประกอบด้วยตัวเลขโดยใช้อาร์เรย์สองมิติ มีอักขระทั้งหมดสิบตัว: 0-9 และโคลอนดังนี้:
จะเห็นว่าตัวละคร 1 ประกอบด้วย
มาเริ่มสร้างผืนผ้าใบกัน:
ฟังก์ชั่นนาฬิกา () { var canvas = document.getElementById (canvas); canvas.width = 600; canvas.height = 100; this.cxt = canvas.getContext('2d'); .cxt.fillRect(0, 0, 500, 100); }โค้ดด้านบนสามารถวาดผืนผ้าใบสีเทาเล็กๆ ในเบราว์เซอร์ได้
มาเริ่มการวิเคราะห์กันด้านล่าง:
1. เข้าใจเมทริกซ์ข้อมูลหรือไม่? มันเป็นอาร์เรย์หลายมิติ
2. จะวาดวงกลมได้อย่างไร?
2.1 จำเป็นต้องทราบรัศมีก่อนหรือไม่?
ดังที่เห็นจากรูปด้านบน ตำแหน่งศูนย์กลางของวงกลมคือ:
r+1r+1 + (r+1)*2*1r+1 + (r+1)*2*2 - - r+1 + (r+1)*2*i
ในเวลาเดียวกัน ยังสามารถหารัศมีได้โดยการคำนวณความสูงของวงกลม ดังนี้
ความสูงของวงกลมคือ (r+1)*2 และความสูงของผืนผ้าใบประกอบด้วยวงกลม 10 วง
แคนวาสความสูง = (r+1)*2*10
หากตั้งค่าความสูงของผืนผ้าใบไว้ที่ 100 r จะปรากฏขึ้น วงกลมตรงกลาง xy จะปรากฏขึ้นด้วย และวงกลมจะเริ่มถูกวาด
ขั้นแรก เพิ่มคำสั่งให้กับวัตถุ Clock ด้านบนเพื่อคำนวณ r
นี่.r = 100/20-1;
ต่อไป ฉันเพิ่มวิธีการวาดให้กับต้นแบบนาฬิกา
Clock.prototype.draw = function(num, index) { this.cxt.fillStyle=#000; for (let i=0; i<digit[num].length; i++) { for (let j=0; j< หลัก [num] [i] .length; j ++) { if (หลัก [num] [i] [j] == 1) { this.cxt.beginPath (); this.cxt.arc(ดัชนี*70+(this.r+1)+(this.r+1)*2*j, (this.r+1)+(this.r+1)*2*i, this.r, 0, Math.PI*2, false); this.cxt.closePath(); this.cxt.fill();Draw ได้รับ 2 พารามิเตอร์ ตัวแรกคือดัชนีอักขระ ตัวที่สองคือลำดับออฟเซ็ตอักขระ 70 คือระยะห่างออฟเซ็ต ซึ่งสามารถปรับแต่งได้
อันแรกสำหรับรับอาร์เรย์อักขระที่จะเรนเดอร์ ส่วนอันที่สองสำหรับรับแต่ละบรรทัดสำหรับเรนเดอร์และเรนเดอร์เป็น 1 เท่านั้น พารามิเตอร์สำหรับการวาดวงกลมส่วนใหญ่จะเป็น x, y, r
ต่อไปเราต้องได้รับเวลา เราสามารถรับเวลาจาก Date ใหม่ได้โดยตรงโดยใช้กฎปกติดังนี้
Clock.prototype.getTime = function() { var reg = /(/d)(/d):(/d)(/d):(/d)(/d)/.exec(วันที่ใหม่()); var data = []; data.push(reg[1], reg[2], 10, reg[3], reg[4], 10, reg[5], reg[6]); i=0; i<data.length; i++) { this.draw(ข้อมูล[i], } }คุณสามารถรับชั่วโมง นาที และวินาทีได้อย่างง่ายดายผ่านนิพจน์ทั่วไป เมื่อพุชอาร์เรย์ ให้ใส่ใจกับรูปแบบที่เกี่ยวข้อง 10 แสดงถึงอักขระตัวที่ 10 ใน digit.js ซึ่งก็คือโคลอน
โปรดทราบว่าจะมีปัญหากับการวาดภาพเช่นนี้ กล่าวคือ ไม่สามารถรีเฟรชแคนวาสได้
ผ้าใบความสูง= 100
ตอนนี้คุณสามารถรันโค้ดได้ดังนี้:
นาฬิกา var = นาฬิกาใหม่ (); setInterval (() => { clock.getTime (); })โอเค นี่มันโอเค
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network