Canvas, antarmuka terkuat H5, mewujudkan fungsi grafis dinamis

Pada artikel terakhir, kami telah berbagi cara menggunakan kanvas untuk menggambar grafik, tetapi semua gambarnya adalah grafik statis. Minggu ini kita akan mempelajari cara menggunakan kanvas untuk menggambar grafik dinamis.

Sebelum kita menggambar animasi, kita harus memahami apa itu animasi. Apa saja syarat dasar minimal yang diperlukan untuk sebuah animasi?

Alat apa yang bisa kita gunakan untuk menampilkan animasi?

Ini adalah efek animasi yang digambar menggunakan PPT

Berdasarkan efek animasi yang digambar oleh PPT di atas, kita dapat melihat bahwa ketika Anda dengan cepat beralih di antara beberapa halaman PPT, Anda akan melihat efek animasi.

Ini adalah elemen dasar implementasi animasi:

Memutar banyak gambar secara terus menerus per satuan waktu. Satuan waktu ini umumnya diukur dalam hitungan detik. Untuk mendapatkan video yang cukup mulus dalam grafik yang dirender oleh komputer, jumlah gambar per detik harus lebih besar atau sama dengan kecepatan refresh monitor (kecepatan refresh ini umumnya 60hz)

Keadaan benda pada setiap gambar (ukuran, bentuk, warna, posisi, sudut, dll) pasti berubah

Jadi bagaimana kita menerapkan kedua kondisi ini di kanvas?

Kita dapat mengubahnya menjadi menggambar grafik setiap 1/60 detik. Dalam JavaScript, jika kita ingin melakukan sesuatu sesekali, metode yang kita gunakan adalah dengan menggunakan timer setinterval.

setinerval（function f(){}，t）， dua parameter dapat diteruskan ke timer, satu adalah fungsi dan yang lainnya adalah waktu.

Lalu kita gunakan ini untuk mencapai apa yang kita perlukan untuk menggambar grafik setiap 1/60 detik

 setInterval(function(){canCon.fillStyle=black;//canCon.fill artinya mengambil pulpen untuk menggambar grafik padat di atas kertas nasi ini, //style=black artinya mencelupkannya ke dalam tinta hitam//terus menerus Untuk melihat itu, ambil saja pena untuk menggambar grafik padat dan tempelkan dengan tinta hitam canCon.arc(233,233,66,0,Math.PI*2); //Pertimbangkan untuk menggambar lingkaran di atas kertas nasi (posisi X di tengah, posisi Y, jari-jari lingkaran, di mana memulai menggambar lingkaran, dan di mana mengakhirinya); pukulan untuk menggambar},1000/60 )

efek akhir

Namun belum ada efek animasinya, karena 60 grafik yang digambar dalam waktu 1 detik semuanya sama persis, sehingga status elemen harus diubah saat setiap grafik digambar.

Ngomong-ngomong, saya ingin merekomendasikan rok kepada Anda. Bagian depan 537, bagian tengah 631, dan yang terakhir 707. Teman-teman yang ingin belajar front-end bisa bergabung dengan kita untuk belajar bersama dan saling membantu. Ada master di grup yang memberikan kelas langsung gratis setiap malam. Jika Anda tidak ingin belajar, jangan bergabung.

(537-631-707)

Bagaimana cara mengubah keadaan suatu elemen?

Posisi suatu lingkaran ditentukan oleh koordinat pusat lingkaran, sehingga kita dapat mengubah posisi elemen setiap kali kita menggambar kanvas.

 bervariasi=100;//Berikan posisi awal pusat lingkaran, dan posisi y dari pusat lingkaran akan bergerak ke bawah sejauh jarak setiap kali ditarik setInterval(function(){canCon.fillStyle=black;// canCon.fill artinya Ambil pulpen untuk menggambar bentuk padat di kertas nasi ini, //style=black artinya mencelupkannya ke dalam Tinta hitam //Untuk menghubungkannya, Anda perlu mengambil pena untuk menggambar grafik padat dan menempelkannya dengan tinta hitam canCon.arc(233,y++,66,0,Math.PI*2);//Di atas nasi kertas Bayangkan dan gambar sebuah lingkaran (posisi X dari pusat lingkaran, posisi Y, jari-jari lingkaran, di mana memulai menggambar lingkaran, dan di mana mengakhirinya); menggambar},1000/60)

Apa yang kita lihat saat ini bukanlah sebuah lingkaran yang bergerak, namun lebih seperti sebuah bilah kemajuan yang memanjang. Alasannya sebenarnya sangat sederhana. Kami tidak menghapus grafik asli setiap kali kami menggambar grafik baru. Gambar tersebut adalah hasil dari n beberapa grafik yang ditumpangkan bersama. Jadi setiap kali kita menggambar grafik baru, kita harus menghapus grafik aslinya.

 bervariasi=100;//Berikan posisi pusat awal lingkaran, dan posisi y dari pusat lingkaran akan bergerak ke bawah sejauh jarak setiap kali ditarik setInterval(function(){canCon.clearRect(0, 0, 500, 500);/ /Hapus koordinat sudut kiri atas suatu luas persegi panjang serta lebar dan tinggi persegi panjang canCon.fillStyle=black;//canCon.fill artinya mengambil lukisan di atas kertas nasi ini Pena dengan grafis padat, //style=black berarti mencelupkannya ke dalam tinta hitam //Untuk menyatukannya berarti mengambil pena yang menggambar grafis padat dan menempelkannya dengan tinta hitam canCon.arc(233,y++,66 , 0,M ath.PI*2);//Pertimbangkan untuk menggambar lingkaran di atas kertas nasi (posisi X dari pusat lingkaran, posisi Y, jari-jari lingkaran, di mana memulai menggambar lingkaran dan di mana mengakhirinya); );// Mulai melukis},1000/60)

Tapi saat ini masih belum berpengaruh, jadi apa sebenarnya yang terjadi? Kita bisa mengingat kembali kejadian saat kita masih kecil ketika sedang melukis. Saat menghapus suatu area tertentu pada kertas gambar, perlukah kita mengangkat kuasnya terlebih dahulu agar kita dapat menggunakan penghapus untuk menghapus area tertentu pada kertas tersebut, jadi kami Anda harus mengangkat pena sebelum menghapus suatu area kanvas.

 bervariasi=100;//Berikan posisi pusat awal lingkaran, dan posisi y dari pusat lingkaran akan bergerak ke bawah sejauh jarak setiap kali ditarik setInterval(function(){canCon.beginPath();// Angkat pena ke atas canCon.clearRect(0, 0, 500, 500); // Hapus koordinat sudut kiri atas suatu area persegi panjang dan koordinat persegi panjang Lebar dan tinggi canCon.fillStyle=black;//canCon.fill artinya mengambil pena untuk menggambar grafik padat di atas kertas nasi ini, //style=black artinya mencelupkannya ke dalam tinta hitam//Jika dilihat bersama-sama , itu adalah Ambil pena untuk menggambar bentuk padat dan tempelkan dengan tinta hitam canCon.arc(233,y++,66,0,Math.PI*2); //Pertimbangkan untuk menggambar lingkaran di atas kertas nasi (posisi X di tengah, posisi Y, jari-jari lingkaran, di mana memulai menggambar lingkaran, dan di mana mengakhirinya); pukulan untuk menggambar},1000/60 )

Dengan cara ini kita bisa mendapatkan lingkaran bergerak

Di atas adalah pengenalan editor tentang antarmuka terkuat H5, kanvas, untuk mengimplementasikan fungsi grafis dinamis. 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!