Contoh implementasi latar belakang animasi partikel kanvas

Tanpa efek koneksi:

Efek menghubungkan:

Untuk mencapai efek seperti itu sebenarnya sangat sederhana dan secara garis besar dapat dibagi menjadi beberapa langkah berikut:

Pertama, Anda perlu membuat tag canvas di elemen induk yang perlu menampilkan latar belakang partikel, dan menentukan width dan height . Saat kita membuat koordinat titik acak, kita perlu menggunakan width dan height sebagai referensi. width dan height sama dengan lebar dan tinggi elemen induk.

 // Jika elemen induknya adalah bodyconst ele = document.body;const canvas = document.createElement('canvas');canvas.width = ele.clientWidth;canvas.height = ele.clientHeight;// Masukkan tag kanvas ke dalam ele .appendChild (kanvas);

Secara acak menghasilkan sejumlah informasi koordinat titik dengan width dan height sebagai referensi, termasuk x , y , rateX (kecepatan pergerakan titik pada sumbu X), rateY (kecepatan pergerakan titik pada sumbu Y) , rateX dan rateY menentukan pergerakan lintasan titik.

 const points = [];// Menghasilkan koordinat titik secara acak, Anda perlu menentukan nilai maksimum radius function getPoint(radius) { const x = Math.ceil(Math.random() * this.width), // Koordinat x partikel y = Math.ceil(Math.random() * this.height), // Koordinat y partikel r = +(Math.random() * this.radius).toFixed(4) , // Jari-jari partikel rateX = +(Math.random() * 2 - 1).toFixed(4), // Laju pergerakan partikel dalam arah x rateY = +(Math.random() * 2 - 1) .toFixed(4) ); // Laju pergerakan partikel pada arah y return { x, y, r, rateX, rateY };}// Hasilkan informasi koordinat 100 titik secara acak untuk (misalkan i = 0; saya < 100; i++) { poin.push(ini.getPoint());}

Gambarkan array titik yang dihasilkan ke kanvas

 fungsi drawPoints() { points.forEach((item, i) => { ctx.beginPath(); ctx.arc(item.x, item.y, item.r, 0, Math.PI*2, false); ctx.fillStyle = '#fff'; ctx.fill(); //Pindahkan koordinat titik sesuai rateX dan rateY if(item.x > 0 && item.x < width && item.y > 0 && item.y < height) { item.x += item.rateX * rate; item.y += item.rateY * rate; partikel Hapus dan buat kembali titik baru. points.splice(i, 1); points.push(getPoint(radius));}

Lintasi susunan titik dan bandingkan koordinat titik-titik tersebut. Jika jarak antara dua titik kurang dari nilai tertentu, tariklah garis lurus antara kedua titik tersebut. lineWidth berubah seiring dengan semakin besarnya jarak , semakin tipis garisnya.

 // Hitung jarak antara dua titik function dis(x1, y1, x2, y2) { var disX = Math.abs(x1 - x2), disY = Math.abs(y1 - y2); disX + disY * disY);}function drawLines() { const len ​​​​= points.length; //Nilai koordinat pusat secara berpasangan for(misalkan i = 0; i < len; i++) { for(misalkan j = len - 1; j >= 0; j--) { const x1 = poin[i].x, y1 = poin[i].y, x2 = poin[j]. x, y2 = titik[j].y, disPoint = dis(x1, y1, x2, y2); // Jika jarak antara dua titik kurang dari 150, buatlah garis if(disPoint <= 150) { ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.strokeStyle = '#fff'; //Semakin besar jarak antara dua titik, semakin tipis garisnya, dan sebaliknya sebaliknya ctx.lineWidth = 1 - disPoint / jarak; ctx.stroke();

Gunakan requestAnimationFrame untuk memanggil metode draw dalam satu lingkaran (metode draw mencakup menggambar titik dan garis), dan pada saat yang sama mengubah posisi titik sesuai dengan rateX dan rateY selama draw .

 // Panggil fungsi draw untuk memulai animasi (function draw() { ctx.clearRect(0, 0, width, height); drawPoints(); // Jika Anda tidak perlu menggambar garis, batalkan saja baris berikut kode.drawLines(); window.requestAnimationFrame(draw);}());

Untuk kode lengkapnya, silakan lihat: https://github.com/PengJiyuan/particle-bg

Github saya: https://github.com/PengJiyuan

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.