Efek koneksi latar belakang dinamis yang populer. Kode di bawah ini disusun dan dikomentari oleh penulis pada kode yang diekstraksi, yang sangat cocok untuk referensi pembelajaran.
Tangkapan layar efek:
Demonstrasi efek: https://jc1144096387.github.io/canvas_nest/
Alamat penulis: https://blog.csdn.net/u013556477/article/details/82819785
Kode HTML (kode uji):
<!doctype html><html lang=en> <head> <meta charset=UTF-8> <meta name=Generator content=EditPlus®> <meta name=Author content=> <meta name=Kata kunci konten=> <meta nama=Deskripsi konten=> <title>Efek koneksi pemandangan kanvas</title> <style type=text/css>*{ margin: 0px padding: 0px; } badan{ warna latar: #f4f4f4; }</style></head><body> <!-- <kanvas id=c_n9 lebar=1366 tinggi=403 style=posisi: atas: 0px kiri: 0px ; indeks-z: -1; opasitas: 0,5;></kanvas> --> <tipe skrip=teks/javascript src=test-clear.js opacity=0 .6></skrip></tubuh></html>Kode Javascript:
//Jalankan fungsi segera //! digunakan untuk memberitahu mesin JavaScript bahwa ini adalah ekspresi fungsi, bukan deklarasi fungsi, (),! , +, - dan operator lain dapat mencapai efek ini, tetapi () adalah yang paling aman // Menambahkan () setelah !function(){} akan segera memanggil fungsi // Ini dapat mensimulasikan lingkup pribadi, Dengan cara ini, html file tidak akan menyebabkan konflik variabel saat mereferensikan beberapa file js! function() { //Elemen kanvas terkait // Buat elemen kanvas dan atur id elemen kanvas var canvas = document.createElement(canvas), konteks = kanvas .getContext (2d), attr = getAttr(); //Mengatur atribut terkait dari kanvas yang dibuat canvas.id = c_n + attr.length; canvas.style.cssText = position:fixed;top:0;left:0;z-index: + attr.z + ;opacity: + attr.opacity; //Tambahkan elemen kanvas ke elemen body document.getElementsByTagName(body)[0].appendChild(canvas); //Fungsi ini mengatur atribut lebar dan tinggi dari elemen kanvas getWindowWH(); //Peristiwa onresize akan terjadi ketika jendela atau bingkai diubah ukurannya //Di sini ketika ukuran jendela berubah, lebar dan tinggi jendela diperoleh kembali Dan mengatur lebar dan tinggi elemen kanvas window.onresize = getWindowWH; //Fungsi ini akan mendapatkan elemen skrip yang mereferensikan file ini. //Karena fungsi getScript dijalankan satu kali selama penugasan dalam file ini, ketika file html merujuk ke file ini, tag skrip setelah file ini belum diinterpretasikan oleh browser. //Jadi dalam array skrip yang diperoleh, elemen skrip yang mereferensikan artikel ini ada di akhir array //Tujuan dari fungsi ini adalah untuk memungkinkan pengembang secara langsung mengubah atribut elemen skrip yang memasukkan file ke dalam HTML ke memodifikasi beberapa properti kanvas, indeks z kanvas, transparansi dan jumlah kotak kecil, warna // Bekerja sama dengan kode sebelumnya untuk menambahkan elemen kanvas ke elemen body efek khusus ini sebagai latar belakang, dia hanya perlu menambahkan elemen skrip ke file html dan kutip saja file ini function getAttr() { let scripts = document.getElementsByTagName(script), len = scripts.length, script = scripts[len - 1]; //v adalah elemen skrip terakhir, yang mengacu pada elemen skrip dari dokumen ini return { length: len, z: script. getAttribute (zIndex) ||. -1, opasitas: skrip.getAttribute(opacity) ||. 0,5, warna: skrip.getAttribute(warna) ||. script.getAttribute(count) ||. 99 } } //Dapatkan lebar dan tinggi jendela, dan atur lebar dan tinggi elemen kanvas fungsi getWindowWH() { W = canvas.width = window.innerWidth || document.documentElement.clientWidth | |.dokumen.body .clientWidth, H = kanvas.tinggi = window.innerHeight ||.dokumen.documentElement.clientHeight ||. //Buat kotak kecil pada posisi acak var random = Math.random, squares = []; //Penyimpanan kotak kecil//Masukkan kotak kecil ke dalam array kotak[] for (misalkan p = 0; p < attr.count; p++ ) { var square_x = acak() * W, //absis persegi_y = acak() * H, //ordinat kuadrat_xa = 2 * acak() - 1, //perpindahan sumbu x-1,1 square_ya = 2 * acak () - 1; //Perpindahan sumbu Y squares.push({ x: square_x, y: square_y, xa: square_xa, ya: square_ya, max: 6000 }) } //Buat kotak mouse kecil var mouse = { x: null, y: null, max: 20000 }; //Dapatkan koordinat mouse window.onmousemove = function(i) { //i adalah W3C DOM, window.event Untuk IE DOM, untuk mencapai kompatibilitas dengan IE //Namun, tampaknya IE saat ini mendukung DOM W3C. Saya menggunakan IE11. Saya juga dapat mencapai efek interaksi mouse dengan mengomentari baris kode berikutnya 7/8/9 tidak didukung. Ya, saya belum mengujinya. //Tentu saja menambahkan i = i ||.window.mouse.x = i.clientX; ; } //Setelah mouse keluar dari jendela, lepaskan mouse. Window.onmouseout persegi kecil = function() { mouse.x = null; mouse.y = null } //Gambarlah kotak kecil, kotak kecil bergerak (gerakan terbalik saat menyentuh batas), kotak kecil dibatasi oleh mouse var animation = window .requestAnimationFrame ||. jendela .webkitRequestAnimationFrame ||. jendela.mozRequestAnimationFrame ||. jendela.oRequestAnimationFrame ||. 45) }; //requestAnimationFrame yang didukung oleh setiap browser berbeda, dan kompatibel dengan setiap browser function draw() { //Hapus konteks kanvas.clearRect(0, 0, W, H); ].concat (kotak); //Hubungkan (gabungkan) array persegi kecil mouse dan array persegi kecil lainnya var x, v, A, B, z, y; //tabel atribut persegi: x, y, xa, ya, maks squares.forEach(function(i) { //Realisasikan arah pergerakan kotak kecil ix += i.xa; iy += i.ya; //Kontrol arah pergerakan kotak kecil//Saat kotak kecil mencapai jendela batas, bergerak berlawanan arah i.xa = i.xa * (ix > W || ix < 0 ? -1 : 1); i.ya = i.ya * (iy > H || iy < 0 ? - 1 : 1); //Dua parameter pertama dari fillRect adalah koordinat x, y dari sudut kiri atas persegi panjang, dan dua parameter terakhir adalah lebar dan tinggi masing-masing //Gambarlah konteks persegi kecil.fillRect(ix - 0.5, iy - 0.5 , 1, 1); //Melintasi Semua elemen di w for (misalkan n = 0; n < w.length; n++) { x = w[n]; //Jika x dan i bukan instance objek yang sama dan koordinat xy dari x ada jika (i !== x && null !== xx && null !== xy) { x_diff = ix - xx; //Selisih koordinat x i dan x y_diff = iy - xy; x_diff * x_diff + y_diff * y_diff; // Sisi miring dikuadratkan jika (jarak < x.max) { //Jadikan kotak kecil i dibatasi oleh kotak kecil mouse, yaitu jika jarak antara kotak kecil i dan kotak kecil mouse terlalu besar, maka kotak kecil i akan dibatasi oleh kotak kecil mouse, //menghasilkan beberapa kotak kecil dengan mouse sebagai pusatnya, mouse.max /2 adalah jari-jari untuk membuat lingkaran jika (x === mouse && distance > x.max / 2) { ix = ix - 0,03 * x_diff; iy = iy - 0,03 * y_diff; } A = (x.maks - distance) / x.max; konteks.beginPath(); //Mengatur ketebalan garis kuas agar berhubungan dengan jarak antara dua kotak kecil, berkisar antara 0-0,5. semakin tipis garisnya, mencapai max Garis menghilang ketika garis digambar konteks.lineWidth = A / 2; //Atur warna garis kuas ke sc, yang merupakan warna kanvas, dan transparansi ke (A+0.2) , artinya, semakin jauh jarak kedua kotak kecil tersebut, semakin terang garisnya attr.color + , + (A + 0.2) + ); //Atur sapuan kuas ke i konteks kotak kecil.moveTo(ix, iy); //Pindahkan sapuan kuas ke x kotak kecil.lineTo(xx , xy); //Menyelesaikan gambar garis, yaitu menggambar garis yang menghubungkan kotak-kotak kecil.stroke(); //Hapus kotak kecil i dari array w //Mencegah dua kotak kecil terhubung berulang kali w.splice(w.indexOf(i), 1 }); //window.requestAnimationFrame mirip dengan setTimeout, membentuk panggilan rekursif , //Namun, window.requestAnimationFrame menggunakan interval waktu sistem untuk mempertahankan efisiensi gambar terbaik, dan memberikan pengoptimalan yang lebih baik untuk membuat animasi lebih lancar//Setelah pengoptimalan browser, animasi menjadi lebih lancar; //Ketika jendela tidak diaktifkan, animasi akan berhenti untuk menghemat sumber daya komputasi; animasi(draw); //Di sini, setelah menunggu selama 0,1 detik, jalankan draw() satu kali. Efek animasi sebenarnya adalah setTimeout( diimplementasikan oleh window .requestAnimationFrame fungsi() { menggambar() }, 100)}();Alamat kode sumber: https://github.com/jc1144096387/canvas_nest
MeringkaskanDi atas adalah kode untuk mengurai kanvas HTML5 untuk mencapai efek dinamis koneksi mouse latar belakang yang diperkenalkan oleh editor. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu . Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!
Jika menurut Anda artikel ini bermanfaat bagi Anda, silakan cetak ulang, harap sebutkan sumbernya, terima kasih!