Contoh gambar kanvas efek bola mengambang

Baru-baru ini, saya memperhatikan informasi blockchain, berkeliling, dan secara tidak sengaja melihat efek beranda situs web ini adalah sekumpulan bola mengambang. Ketika bola sudah dekat, akan ada garis penginderaan yang terhubung ke sana. Mouse juga dapat membuat garis penginderaan dengan bola. Lihat Berikut ini dibuat menggunakan kanvas.

Efek asli

mencapai efek

Saya telah banyak berhubungan dengan svg sebelumnya, dan saya tahu bahwa kanvas juga dapat menghasilkan efek rendering yang sangat kuat, tetapi belum pernah ada skenario penggunaan yang memberi saya kesempatan untuk memulai .

Selain itu, alasan mengapa saya tertarik dengan hal ini adalah karena saya menyukai efek visual, dan yang lainnya adalah karena saya menyukai perasaan simulasi dunia fisik seperti mesin game , atau memiliki gaya tolak gravitasi antara satu sama lain, atau meningkatkan Faktor gravitasi. Animasi ini juga dapat membuka banyak imajinasi.

Lihat repo github di sini.

Instruksi menggambar di Canvas sangat mirip dengan instruksi di SVG, sangat sederhana.

 ctx.beginPath();ctx.arc(this.center.x, this.center.y, this.radius, 0, 2 * Math.PI);ctx.fill();

beginPath memulai jalur, busur menggambar lingkaran, dan mengisinya dengan warna.

 ctx.beginPath();ctx.moveTo(from.x, from.y);ctx.lineTo(to.x, to.y);ctx.stroke();

Demikian pula, BeginPath memulai sebuah jalur, moveTo menggerakkan kuas ke titik awal, lineTo menarik garis ke titik akhir, dan menggoreskan guratan.

Untuk menjaga kanvas tetap dalam layar penuh, cukup atur ulang lebar dan tinggi kanvas saat jendela dimuat atau diubah ukurannya.

 var kanvas = document.getElementById(kanvas); fungsi resizeCanvas() { kanvas.width = window.innerWidth = window.innerHeight;}window.onload = window.onresize = resizeCanvas;

Animasi dasar membantu saya memulai.

Empat langkah untuk membuat animasi:

1. Hapus konten kanvas, biasanya menggunakan clearRect()
2. Simpan status kanvas
3. Gambar konten
4. Setel ulang status kanvas

Apa yang saya lakukan relatif sederhana, hanya menggunakan cara 1 dan 3, yaitu terus-menerus membersihkan kanvas lalu menggambar ulang.

 window.onload = function () { resizeCanvas(); window.requestAnimationFrame(draw);};function cleanCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height);}function draw() { cleanCanvas (); // menggambar barang. window.requestAnimationFrame(menggambar);}

Tiga tersedia:

1. window.setInterval() Jika tidak diperlukan interaksi pengguna sama sekali dan hanya menggambar ulang terus-menerus, ini sudah cukup.
2. window.setTimeout() Jika Anda ingin operasi pengguna, seperti keyboard dan mouse, memengaruhi animasi, Anda dapat menggunakan ini (Saya tidak mengerti, bukankah requestAnimationFrame lebih baik?)
3. window.requestAnimationFrame() memberi tahu browser apa yang harus dilakukan sebelum menggambar ulang di lain waktu, yaitu operasi menggambar kustom Anda sendiri.

Contoh di MDN ini cukup keren. CodePen bisa dipindahkan, dan berikut screenshotnya saja.

Saya telah melihat beberapa Pengembangan Mesin Game sebelumnya, dan saya secara sadar membuat enkapsulasi berorientasi objek. Yang digunakan di sini sangat sederhana.

Yang paling mendasar adalah Vektor merepresentasikan suatu titik/vektor dalam ruang dua dimensi, dan anggotanya hanya x dan y.

Atas dasar ini, Lingkaran melambangkan lingkaran, pusat anggota: Vektor melambangkan pusat lingkaran, jari-jari: bilangan melambangkan jari-jari, dan kecepatan: Vektor melambangkan kecepatan.

Kemudian rangkum beberapa fungsi anggota untuk Anda gunakan sendiri.

TypeScript + Webpack + Webpack-dev-server tidak rumit, cukup merujuk ke konten berikut:

1. Paket Web/Memulai
2. Paket Web/Skrip Ketik
3. Paket Web/devServer
4. webpack-dev-server

Selain itu, saya juga mencoba npx, yang digunakan untuk menjalankan program npm yang dapat dieksekusi. Sebelumnya, webpack diinstal secara global, dan Anda cukup memanggil webpack xx secara langsung. Jika Anda menginstal webpack secara lokal, Anda harus melalui ./node_modules/. .bin/webpack Untuk menjalankan webpack lokal, Anda sekarang dapat npx webpack xxx.

Dalam konfigurasi devServer, saya menambahkan hot: true untuk mengaktifkan pembaruan terkini. Hasilnya, halaman web meminta: [HMR] Penggantian Modul Panas dinonaktifkan.

Saya menganggapnya sebagai jebakan lama. Ketika saya perlu menyebutnya, tambahkan parameter baris perintah: webpack-dev-server --hot --inline

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