Rumah > Artikel > hujung hadapan web > Tutorial menggunakan Kanvas dalam HTML5 digabungkan dengan formula untuk melukis kemahiran tutorial zarah motion_html5
Baru-baru ini, saya ingin membuat halaman web dan meletakkan beberapa DEMO yang saya buat semasa proses pembelajaran HTML5 untuk membuat koleksi Walau bagaimanapun, adalah terlalu hodoh untuk hanya membuat halaman web dan mengatur semua DEMO oleh seorang. Saya hanya berfikir, kerana saya telah belajar kanvas, mari bermain-main dengan penyemak imbas dan membuat animasi pembukaan kecil.
Setelah berfikir tentang kesan animasi pembukaan untuk seketika, saya memutuskan untuk menggunakan zarah kerana saya fikir zarah lebih menyeronokkan. Saya masih ingat bahawa catatan blog teknikal pertama yang saya tulis adalah mengenai pembahagian teks dan gambar: Membahagikan teks dan gambar Pada masa itu, saya hanya melakukan gerakan linear, dan menambah sedikit kesan 3D. Formula senaman adalah mudah. Jadi saya hanya mahu menjadikan animasi pembukaan ini lebih dinamik.
Pergi ke DEMO dahulu: http://2.axescanvas.sinaapp.com/demoHome/index.html
Adakah kesannya lebih dinamik daripada gerakan linear? Dan ia sangat mudah, jangan lupa tajuk catatan blog ini, sedikit formula, menyeronokkan. Untuk mencapai kesan sedemikian, apa yang kita perlukan ialah sekolah menengah rendah kita. . Atau pengetahuan fizik di sekolah menengah, formula gerakan dipercepat dan gerakan nyahpecutan. Jadi ia benar-benar formula penurunan kecil. Poster asal suka bermain-main dengan beberapa perkara yang menarik Walaupun dia mungkin tidak menggunakannya di tempat kerja, keseronokan itu benar-benar menarik. Selain itu, melakukan ini juga boleh mengukuhkan kemahiran berfikir pengaturcaraan anda.
Tanpa berlengah lagi, mari kita ke topik. Biar saya terangkan secara ringkas prinsipnya~~~
Kod teras pergerakan zarah hanyalah ini:
x dan y ialah kedudukan zarah, vx ialah halaju mendatar zarah, dan vy ialah halaju menegak zarah Tidak kira sama ada anda tahu nexttox atau seumpamanya, ia hanyalah pembolehubah sementara . tox, dan mainan ialah lokasi destinasi zarah.
Pertama, berikan semua zarah destinasi, yang akan dibincangkan di bawah. Maksudnya, anda mahu zarah mencapai tempat itu, dan kemudian menentukan pembolehubah za sebagai pecutan Jika anda ingin mengetahui nilai tertentu, anda akan mendapat parameter anggaran melalui lebih banyak ujian, dan rasanya lebih kurang sama. za ialah pecutan garis antara zarah dan destinasi Oleh itu, kita boleh mengira pecutan mendatar dan pecutan menegak zarah melalui kedudukan zarah dan kedudukan destinasi melalui fungsi trigonometri mudah ini
.
Sekarang setelah kita bercakap tentang prinsip gerakan, mari kita bincangkan tentang pelaksanaan khusus animasi di atas: pemulaan animasi, lukis perkataan atau gambar yang diingini pada kanvas luar skrin, dan kemudian dapatkan piksel off- kanvas skrin melalui kaedah getImageData . Kemudian gunakan gelung untuk mencari kawasan yang dilukis dalam kanvas luar skrin Oleh kerana nilai data dalam imageData ialah tatasusunan rgba, kami menilai bahawa nilai terakhir, iaitu, ketelusan adalah lebih besar daripada 128, bermakna kawasan itu telah. dilukis. Kemudian dapatkan nilai xy kawasan Untuk mengelakkan terlalu banyak objek zarah daripada menyebabkan lag halaman, kami mengehadkan bilangan zarah Apabila mengambil piksel, nilai x dan nilai y meningkat sebanyak 2 setiap kali, dengan itu mengurangkan bilangan zarah zarah.
通过循环获取到粒子的位置xy值后,把位置赋给粒子,成为粒子的目的地。一值后,把位置赋给粒子,成为粒子的目的地。倶始后出文字图片粒子化的效果了。