ตัวอย่างการใช้งานพื้นหลังแอนิเมชั่นอนุภาคแคนวาส

ไม่มีผลการเชื่อมต่อ:

ผลของการเชื่อมต่อ:

เพื่อให้บรรลุผลดังกล่าวนั้นง่ายมากจริงๆ และสามารถแบ่งคร่าวๆ ออกเป็นขั้นตอนต่อไปนี้:

ขั้นแรก คุณต้องสร้างแท็ก canvas ในองค์ประกอบหลักที่ต้องการแสดงพื้นหลังของอนุภาค และระบุ width และ height เมื่อเราสร้างพิกัดจุดสุ่ม เราจำเป็นต้องใช้ width และ height เป็นข้อมูลอ้างอิง width และ height เท่ากับความกว้างและความสูงขององค์ประกอบหลัก

 // หากองค์ประกอบหลักคือ bodyconst ele = document.body;const canvas = document.createElement('canvas');canvas.width = ele.clientWidth;canvas.height = ele.clientHeight;// ใส่แท็ก canvas ลงใน ele .appendChild (ผืนผ้าใบ);

สุ่มสร้างข้อมูลพิกัดจุดจำนวนหนึ่งโดยมี width และ height เป็นข้อมูลอ้างอิง รวมถึง x , y , rateX (อัตราการเคลื่อนที่ของจุดบนแกน X), rateY (อัตราการเคลื่อนที่ของจุดบนแกน Y) , rateX และ rateY เป็นตัวกำหนดการเคลื่อนที่ของวิถีจุด

 const point = [];// สร้างพิกัดของจุดแบบสุ่ม คุณต้องระบุค่าสูงสุดของฟังก์ชันรัศมี getPoint(radius) { const x = Math.ceil(Math.random() * this.width), // พิกัด x ของอนุภาค y = Math.ceil(Math.random() * this.height), // พิกัด y ของอนุภาค r = +(Math.random() * this.radius).toFixed(4) , // รัศมีของอัตราอนุภาคX = +(Math.random() * 2 - 1).toFixed(4), // อัตราการเคลื่อนที่ของอนุภาคในทิศทาง x อัตราY = +(Math.random() * 2 - 1) .toFixed(4) ); // อัตราการเคลื่อนที่ของอนุภาคในทิศทาง y กลับ { x, y, r, rateX, rateY };}// สุ่มสร้างข้อมูลพิกัด 100 จุดสำหรับ (ให้ i = 0; ฉัน < 100; i++) { point.push(this.getPoint());}

วาดอาร์เรย์พอยต์ที่สร้างขึ้นบนผืนผ้าใบ

 ฟังก์ชั่น DrawPoints() { point.forEach((item, i) => { ctx.beginPath(); ctx.arc(item.x, item.y, item.r, 0, Math.PI*2, false); ctx.fillStyle = '#fff'; ctx.fill(); // ย้ายพิกัดของจุดตามrateX และrateY if(item.x > 0 && item.x < width && item.y > 0 && item.y < height) { item.x += item.rateX * อัตรา; item.y += item.rateY * อัตรา; } อื่น ๆ { // หากการเคลื่อนที่ของอนุภาคเกินขอบเขต ให้ย้าย อนุภาค ลบและสร้างจุดใหม่ point.splice(i, 1); point.push(getPoint(radius));}

สำรวจอาร์เรย์จุดและเปรียบเทียบพิกัดของจุด หากระยะห่างระหว่างจุดสองจุดน้อยกว่าค่าที่กำหนด ให้วาดเส้นตรงระหว่างจุดสองจุดนั้น lineWidth จะเปลี่ยนไปตามระยะห่างระหว่างจุดสองจุดมากขึ้น , ยิ่งเส้นบางลง

 // คำนวณระยะห่างระหว่างจุดสองจุด ฟังก์ชัน dis(x1, y1, x2, y2) { var disX = Math.abs(x1 - x2), disY = Math.abs(y1 - y2); disX + disY * disY);} function DrawLines() { const len ​​​​= point.length; // ตัดสินพิกัดกึ่งกลางเป็นคู่สำหรับ (let i = 0; i < len; i++) { สำหรับ (ให้ j = len - 1; j >= 0; j--) { const x1 = คะแนน [i] .x, y1 = คะแนน [i] .y, x2 = คะแนน [j] x, y2 = point[j].y, disPoint = dis(x1, y1, x2, y2); // ถ้าระยะห่างระหว่างจุดสองจุดน้อยกว่า 150 ให้ลากเส้น if(disPoint <= 150) { ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx. strokeStyle = '#fff'; // ยิ่งระยะห่างระหว่างจุดสองจุดมากเท่าไร เส้นก็จะบางลงเท่านั้น ในทางกลับกัน ctx.lineWidth = 1 - disPoint / ระยะทาง;

ใช้ requestAnimationFrame เพื่อเรียกใช้เมธอด draw แบบวนซ้ำ (วิธีการวาดประกอบด้วยจุดวาดและเส้น) และในขณะเดียวกันก็เปลี่ยนตำแหน่งของจุดตาม rateX และ rateY ระหว่าง draw

 // เรียกใช้ฟังก์ชัน Draw เพื่อเริ่มแอนิเมชั่น (ฟังก์ชัน Draw() { ctx.clearRect(0, 0, width, height); DrawPoints(); // หากคุณไม่ต้องการวาดเส้น ให้ยกเลิกบรรทัดต่อไปนี้ของ code.drawLines(); window.requestAnimationFrame(วาด);}());

สำหรับโค้ดที่สมบูรณ์ โปรดดู: https://github.com/PengJiyuan/particle-bg

Github ของฉัน: https://github.com/PengJiyuan

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network