Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Animation
Code

Pengoptimalan Kanvas HTML5: Contoh Praktis

by
Difficulty:IntermediateLength:LongLanguages:

Malay (Melayu) translation by Umar bin Abdul Aziz (you can also view the original English article)

Sekiranya anda telah melakukan pembesaran JavaScript cukup lama, kemungkinan besar anda akan mengganggu pelayar anda beberapa kali. Masalahnya biasanya ternyata beberapa JavaScript bugs, seperti perulangan while tanpa henti; Jika tidak, perkara selanjutnya adalah transformasi halaman atau animasi - jenis yang melibatkan penambahan dan penghapusan elemen dari laman web atau menganalisasi CSS gaya properti. Tutorial ini berfokus pada animasi pengoptimalan yang dihasilkan dengan menggunakan JS dan elemen <canvas> HTML5

Tutorial ini bermula dan diakhiri dengan HTML5 animasi widget yang anda lihat dibawah ini:

Kami akan membawanya bersama kami dalam perjalanan, menjelajah pelbagai tip dan teknik pengoptimalan kanvas dan menerapkannya ke JavaScript widget sumber kod. Tujuannya adalah untuk meningkatkan widget eksekusi laju dan berakhir dengan animasi widget yang lebih halus dan lebih cair, didukung oleh JavaScript yang lebih ramping dan lebih efisien.

Muat turun sumber mengandungi HTML dan JavaScript dari setiap langkah dalam tutorial, sehingga Anda dapat mengikuti dari mana pun juga.

Mari kita ikuti langkah pertama.


Langkah 1: Memainkan Filem Trailer

Widget di atas berdasarkan filem treler untuk Sintel , sebuah animasi 3D filem oleh Blender Foundation .Dibuat dengan menggunakan dua tambahan HTML5 yang paling popular: elemen <canvas> dan <video> .dan. dan .dan. dan .dan.

memuat <vidio> dan memutar video fail Sintel, sedangkan <canvas> menghasilkan animasi urut sendiri dengan mengambil gambar dari video yang diputar dan mencampurnya dengan teks dan lain-lain. Ketika anda mengklik untuk memutar video, kanvas muncul di latar belakang gelap yang merupakan salinan video hitam dan putih yang lebih besar dari video yang sedang diputar. Gambar video yang lebih kecil dan berwarna disalin ke skrin, dan meluncur di atasnya sebagai sebahagian daripada filem penggambaran gambar.

Di pojok kiri atas, kita mempunyai tajuk dan beberapa baris deskriptif teks yang memudar masuk dan keluar ketika animasi dimainkan. Skrip prestasi pantas dan metrik berkaitan disertakan sebagai sebahagian daripada animasi, di kotak hitam kecil di bahagian bawah kiri dengan grafik dan teks yang jelas. Kita akan melihat perkara ini dengan lebih terperinci nanti.

Akhirnya, ada pisau besar berputar yang terbang melintasi layar di awal animasi, yang diambil dari gambar grafis gambar PNG gambar eksternal.


Langkah 2: Melihat Sumbernya

Sumber kod mengandungi campuran HTML, CSS dan biasa Javascript. HTML-nya jarang: hanya tag <canvas> dan <vidio>, dilampirkan dalam <div> kontena:

<div> kontainer diberikan ID ( animationWidget ), yang bertindak sebagai kait untuk semua CSS peraturan yang diterapkan padanya dan kandungannya (bawah).

Sementara HTML dan CSS adalah rempah-rempah dan bumbu yang diasinkan, JavaScript adalah daging dari widget.

  • Di bahagian atas, kami mempunyai objek utama yang akan sering digunakan melalui skrip, termasuk rujukan ke elemen kanvas dan konteks 2D.
  • Fungsi init() dipanggil setiap kali video bermula diputar, dan mengatur semua objek yang digunakan dalam skrip.
  • Fungsi sampleVideo() menangkap video bingkai yang diputar pada masa ini, manakala setBlade()memuat gambar yang diperlukan oleh animasi.
  • Kalkulator animasi kelajuan dan kandungan dikendalikan oleh fungsi main() , yang seperti jantung bunyi dari skrip. Jalankan pada reguler selang waktu video bermula diputar, ia melukis setiap animasi bingkai dengan terlebih dahulu membersihkan kanvas, kemudian panggil masing-masing dari lima penggambaran fungsi dari skrip:
    • drawBackground()
    • drawFilm()
    • drawTitle()
    • drawDescription()
    • drawStats()

Seperti namanya, setiap fungsi menggambar bertanggung jawab untuk menggambar item di adegan animasi. Penataan kod dengan cara ini meningkatkan fleksibilitas dan mempermudah rawatan di masa depan.

Skrip lengkap ditunjukkan di bawah ini. Luangkan masa untuk menilai, dan lihat apakah anda dapat menemukan perubahan yang akan anda lakukan untuk mempercepatnya.


Langkah 3: Optimalisasi Kod: Ketahui Peraturannya

Aturan pertama dari kod prestasi optimasi adalah: Jangan.

Inti dari peraturan ini adalah untuk mencegah optimasi demi optimalisasi, karena prosesnya sesuai dengan harga tertentu.

Skrip yang sangat optimum akan memudahkan penyemak imbas untuk mengurai dan mengolahnya, tetapi biasanya dengan beban bagi manusia yang akan merasa lebih sulit untuk diikuti dan dipelihara. Kapan pun memutuskan bahawa beberapa pengoptimalan diperlukan, tetapkan beberapa tujuan sebelumnya sehingga Anda tidak terbawa-bawa oleh proses dan berlebihan.

Tujuan dalam mengoptimalkan widget ini adalah agar fungsi main() berjalan dalam waktu kurang dari 33 milidetik sebagaimana mestinya, yang akan cocok dengan frame rate dari video file yang dimainkan (sintel.mp4 dan sintel.webm ). Fail-file ini dikodekan pada pemutaran kelajuan 30fps (tiga puluh frame per detik), yang bermakna sekitar 0,33 detik atau 33 milidetik per frame (1 detik ÷ 30 frame).

Karena JavaScript menggambar bingkai animasi baru ke kanvas setiap kali fungsi main() dipanggil, tujuan pengoptimalan kami adalah membuat fungsi ini memakan waktu 33 milidetik atau kurang setiap kali berjalan. Fungsi ini berulang kali memanggil dirinya sendiri menggunakan pemasa Javascript setTimeout()seperti yang ditunjukkan di bawah ini.

Aturan kedua: Belum.

Aturan ini menekankan bahwa pengoptimalan harus selalu dilakukan pada akhir proses pengembangan jika Anda telah menyelesaikan beberapa kode yang bekerja dengan lengkap. Polisi optimisasi akan membolehkan kita melakukan yang satu ini, karena widget script adalah contoh sempurna dari program yang bekerja dengan lengkap yang siap untuk prosesnya.

Aturan ketiga: Belum, dan profil dulu.

Aturan ini adalah tentang memahami program anda dalam hal runtime prestasi. Profil membantu anda mengetahui daripada mengukur fungsi atau skrip kawasan mana yang paling banyak digunakan atau paling sering digunakan, sehingga Anda dapat berfokus pada proses optimasi. Hal ini cukup penting untuk membuat penyiar utama dihantar dengan profiler JavaScript yang dipasang, atau mempunyai ekstensi yang menyediakan layanan ini.

Saya menjalankan widget di bawah profiler di Firebug , dan di bawah adalah screenshot dari hasilnya.


Langkah 4: Tetapkan Beberapa Prestasi Metrik

Saat Anda menjalankan widget, saya yakin Anda menemukan semua barang Sintel baik-baik saja, dan benar-benar terpesona oleh item di sudut kanan bawah kanvas, yang memiliki grafik dan indah teks.

Ini bukan hanya wajah cantik; kotak itu juga memberikan beberapa statistik prestasi masa nyata pada program yang sedang berjalan. Itu sebenarnya sederhana, profil dasar Javascript. Benar! Yo, saya mendengar anda menyukai profil, jadi saya memasukkan profiler ke dalam film anda, sehingga Anda dapat mem-profile saat Anda menonton.

Grafiknya melacak Render Time , dihitung dengan mengukur berapa lama setiap menjalankan dari main()yang diperlukan dalam milidetik. Karena ini adalah fungsi yang menarik setiap bingkai dari animasi, secara efektif frame rate dari animasi. Setiap garis biru vertikal pada grafik menggambarkan masa yang diperlukan oleh satu bingkai. Garis horizontal merah adalah sasaran pantas, yang kita atur pada 33ms agar sesuai dengan video file frame rate. Tepat di bawah grafik, kelajuan panggilan terakhir ke main() yang diberikan dalam milidetik.

Profiler juga merupakan ujian rendering yang mudah digunakan. Pada masa ini, rata-rata masa di Firefox adalah 55ms, 90ms di IE 9, 41ms di Chrome, 148ms di Opera dan 63ms di Safari. Semua penyemak imbas berjalan pada Windows XP, kecuali IE 9 yang profilnya di Windows Vista.

Metrik seterusnya di bawah itu adalah FPS Kanvas (bingkai setiap saat dari kanvas), yang diperoleh dengan mengitung berapa kali main() dipanggil setiap detik. Profiler memaparkan tahap terkini FPS Canvas ketika video masih diputar, dan ketika selesai ia menunjukkan rata-rata rata-rata semua panggilan ke main() .

Metrik terakhir adalah Browser FPS , yang mengukur berapa banyak pelayar menghapus tetingkap saat ini setiap saatnya. Yang satu ini hanya tersedia jika anda melihat widget di Firefox, kerana bergantung pada fitur yang saat ini hanya tersedia di browser itu disebut window.mozPaintCount. , sebuah JavaScript property yang mencatat berapa kali penyemak imbas windows telah dilukis semula sejak dimuat halaman pertama kali.

Penggambaran ulang biasanya terjadi apabila suatu peristiwa atau tindakan mengubah halaman paparan, seperti saat Anda meluncur ke bawah halaman atau mouse-over sebuah link. Ini secara efektif merupakan peramban frame rate nyata, yang ditentukan oleh berapa laman web saat ini sibuk.

Untuk mengukur kesan kanvas animasi yang tidak dioptimalkan pada mozPaintCount , saya menghapus kanvas tag dan semua JavaScript, sehingga dapat menjejaki peramban rate frame saat memutar video saja. Tes saya dilakukan di konsol Firebug, dengan menggunakan fungsi di bawah ini:

Hasilnya: Peramban kadar bingkai adalah antara 30 dan 32 FPS ketika video diputar, dan menurunkan ke FPS 0-1 saat video berakhir. Ini bermakna bahawa Firefox menyesuaikan frekuensi penggambaran windows agar sesuai dengan video yang diputar, dienkodekan pada 30fps. Ketika tes dijalankan dengan kanvas animasi yang tidak dioptimalkan dan video yang diputar bersama-sama, ia akan melambat hingga 16fps, karena browser sekarang berjuang untuk menjalankan semua JavaScript dan masih menggambar ulang jendela tepat waktu, membuat pemutaran video dan kanvas animasi melamban.

Kita sekarang akan mulai mengutak-atik program kita, dan ketika kita melakukannya, kita akan terus melacak Render Time, FPS Canvas dan Browser FPS untuk mengukur dampak perubahan kita.


Langkah 5: Gunakan requestAnimationFrame()

Dua cuplikan JavaScript terakhir di atas menggunakan fungsi pemasa setTimeout() dan setInterval() .Untuk menggunakan fungsi ini, anda menentukan masa interval dalam milidetik dan fungsi panggilan balik yang anda ingin dieksekusi setelah berlalunya masa. Perbedaan antara keduanya adalah setTimeout()akan memanggil fungsi anda sekali saja, sementara setInterval() memanggilnya sekali lagi.

Sementara fungsi ini selalu menjadi alat yang amat diperlukan dalam JavaScript animator kit, mereka memiliki beberapa kekurangan:

Pertama, tetapkan selang masa tidak selalu bisa diandalkan. Jika program masih berada di tengah mengeksekusi sesuatu yang lain ketika selang waktu berlalu, panggil balik fungsi akan dieksekusi nantinya dari yang semula ditetapkan, setelah browser tidak lagi sibuk. Pada fungsi main() , kita menetapkan selang ke 33 milidetik - tetapi selari profilernya mengungkapkan, fungsi ini sebenarnya dipanggil setiap 148 milidetik di Opera.

Kedua, ada masalah dengan penggambaran ulang penyemak imbas. Jika kita mempunyai fungsi panggilan balik yang menghasilkan 20 bingkai animasi per detik sementara browser menggambar ulang jendelanya hanya 12 kali per detik, 8 panggilan ke fungsi itu akan dibuang karena pengguna tidak akan pernah bisa melihat hasilnya.

Akhirnya, pelayar tidak mempunyai cara untuk mengetahui bahawa fungsi yang dipanggil adalah elemen animasi dalam dokumen. Ini bermakna bahawa jika elemen tersebut digeser keluar dari tampilan, atau pengguna mengklik tab lain, panggil balik akan tetap dieksekusi ulang kali, menghabiskan CPU cycles.

Menggunakan requestAnimationFrame() memecahkan sebahagian besar masalah ini, dan ini dapat digunakan sebagai pengganti fungsi timer dalam HTML5 animasi. Alih alih menentukan masa selang, requestAnimationFrame() menyinkronkan panggilan fungsi dengan penggambaran ulang penyemak imbas windows. Ini menghasilkan animasi yang lebih meluas dan konsisten kerana tidak ada frame yang dijatuhkan, dan browser dapat melakukan pengoptimalan internal lebih jauh karena mengetahui animasi sedang berlangsung.

Untuk mengganti setTimeout() dengan requestAnimationFrame di widget kami, pertama-tama tambahkan baris berikut di bahagian atas skrip kita:

Oleh kerana spesifikasinya masih cukup baru, beberapa penyemak imbas atau penyemak imbas versi mempunyai eksperimental pelaksanaan sendiri, ini memastikan bahawa fungsi nama menunjuk ke cara yang benar jika tersedia, dan kembali kembali ke setTimeout() jika tidak. Kemudian pada fungsi main() , kita mengubah baris ini:

... menjadi:

Parameter pertama mengambil fungsi panggil balik, yang dalam hal ini adalah fungsi main() . Parameter kedua adalah pilihan, dan menentukan DOM elemen yang mengandungi animasi. Ini seharusnya digunakan untuk mengitung tambahan pengoptimalan.

Perhatikan bahawa fungsi getStats() juga menggunakan setTimeout() , namun kami membiarkannya kerana fungsi khusus ini tidak ada hubungannya dengan menganaskan scene. requestAnimationFrame()khusus untuk animasi, jadi jika fungsi callback Anda tidak melakukan animasi, Anda masih dapat menggunakan setTimeout() atau setInterval() .


Langkah 6: Gunakan Penglihatan Halaman API

Pada langkah terakhir kami membuat permintaanAnimationFrame menggerakkan kanvas animasi, dan sekarang kita mempunyai masalah baru. Jika kita mula menjalankan widget, kemudian minimize browser window atau pindahkan ke new tab, widget window level redraw down to save power. Ini juga memperlambat kanvas animasi kerana kini disinkronisasi dengan tingkat gambar ulang - yang akan sempurna jika video tidak terus diputar sampai akhir.

Kita memerlukan cara untuk mendeteksi kapan halaman tidak dilihat sehingga kita dapat menghentikan sementara pemutaran video; di sinilah Visibility Page API datang untuk menyelamatkan.

API mengandungi seperangkat harta, fungsi dan peristiwa yang boleh kita gunakan untuk mengetahui apakah ada laman web yang dilihat atau disembunyikan. Kami kemudian boleh menambah kod yang menyesuaikan program kami. Kita akan menggunakan API ini untuk memainkan video pemutaran pada widget setiap kali halaman tidak aktif.

Kita bermula dengan menambah pendengar acara baru ke skrip kita:

Selanjutnya datanglah fungsi event handler:


Langkah 7: Untuk Bentuk Kustom, Gambarkan Seluruh Laluan Sekaligus ,

Laluan digunakan untuk membuat dan menggambarkan bentuk dan garis tepi pada elemen <canvas> , yang setiap saat akan mempunyai satu laluan yang aktif.

Path mengandungi senarai sub-path, dan setiap sub-path terdiri daripada titik koordinat kanvas yang dihubungkan bersama dengan garis atau kurva. Semua fungsi pembuatan dan penggambaran path adalah property dari object canvas canvas context , dan dapat digolongkan menjadi dua kelompok.

Ada fungsi pembuatan subpath, yang digunakan untuk menentukan subpath dan menyertakan lineTo(),quadraticCurveTo() , bezierCurveTo() , dan arc() . Kemudian kita mempunyai stroke() dan fill() , fungsi menggambar path / subpath. Menggunakan stroke() akan menghasilkan garis tepi, sedangkan fill()menghasilkan bentuk yang diisi dengan warna, gradien atau pola.

Ketika menggambar bentuk dan garis tepi pada kanvas, lebih efisien untuk membuat keseluruhan jalan terlebih dahulu, lalu hanya stroke() atau fill() padanya sekali, daripada menentukan dan gambar setiap supat sekaligus. Dengan mengambil profiler grafik yang dijelaskan pada Langkah 4 sebagai contoh, masing-masing garis vertikal biru adalah subpath, sementara semuanya bersama membentuk jalur saat

stroke() kaedah stroke() saat ini dipanggil dalam satu gelung yang mendefinisikan setiap subpath:

Grafik ini boleh ditarik jauh lebih efisien dengan terlebih dahulu mentakrifkan semua subpath, kemudian menggambarkan keseluruhan jalan saat ini sekaligus, seperti yang ditunjukkan di bawah ini.


Langkah 8: Gunakan Screen Off Canvas untuk Membangun Adegan

Teknik pengoptimalan ini berkaitan dengan yang ada di langkah sebelumnya, bahwa keduanya didasarkan pada prinsip yang sama untuk meminimalkan penggambaran ulang halaman web.

Setiap kali berlaku sesuatu yang mengubah paparan atau dokumen isi, penyemak imbas harus menjadwalkan pembacaan ulang operasi segera setelah itu untuk memperbaharui interfacenya.Penggambaran ulang dapat menjadi operasi yang mahal dalam hal CPU dan kekuatan CPU, terutama untuk halaman yang padat dengan banyak elemen dan animasi yang sedang berlangsung. Jika anda membina kompleks animasi adegan dengan menambah banyak item satu per satu ke <canvas>, setiap penambahan baru mungkin akan memicu keseluruhan penggambaran ulang, setiap penambahan baru mungkin akan memicu keseluruhan penggambaran ulang.

Lebih baik dan lebih cepat untuk membina pemandangan di luar skrin (dalam memori) <canvas>, dan sekali gambar, gambar seluruh scane hanya sekali ke layar, <canvas> , dan sekali selesai, gambar seluruh scene hanya sekali ke layar, gambarkan seluruh scene yang kelihatan.

Hanya di bawah kod yang merujuk kepada dan konteksnya, kami akan menambah lima barisan baru yang membuat objek DOM <canvas> di luar skrin dan memadankan dimensinya dengan <canvas>.

Kita kemudian akan melakukan pencarian dan penggantian di semua fungsi menggambar untuk semua rujukan ke "mainCanvas" dan mengubahnya menjadi "osCanvas". . Segala-galanya kini akan ditarik ke kanvas luar skrin baru, bukannya <canvas> asal.

Akhirnya, kami menambah satu lagi baris ke utama () yang melukis apa yang sedang pada skrin <canvas> ke kanvas asal <canvas>


Langkah 9: Laluan Cache Sebagai Gambar Bitmap Bila Memungkinkan

Untuk banyak jenis grafis, menggunakan drawImage() akan jauh lebih cepat daripada membuat gambar yang sama pada kanvas menggunakan path. Jika Anda menemukan bahwa ramuan besar skrip Anda dihabiskan berulang kali menggambar shape dan garis tepi yang sama berulang-ulang, Anda dapat menghemat beberapa pekerjaan browser dengan menyimpan gambar yang dihasilkan sebagai gambar bitmap, lalu melukisnya sekali saja ke canvas kapan pun dibutuhkan dengan menggunakan drawImage() .

Ada dua cara untuk melakukan ini.

Yang pertama adalah dengan membuat gambar sebagai eksternal gambar sebagai gambar JPG, GIF atau PNG, kemudian memuatnya secara dynamis menggunakan JavaScript dan menyalinnya ke kanvas anda. Satu kelemahan dari kaedah ini adalah tambahan file yang harus diunduh program anda dari jaringan, namun bergantung pada jenis grafis atau aplikasi Anda, ini sebenarnya bisa menjadi solusi yang baik. Animasi widget menggunakan kaedah ini untuk memuat grafik berbentuk pisau, yang tidak mungkin dibuat ulang hanya dengan menggunakan garis penggambaran fungsi dari kanvas.

Kedua kaedah melibatkan hanya dengan menggambar grafik sekali ke kanvas di luar skrin daripada memuat gambar eksternal. Kita akan menggunakan kaedah ini untuk menangkap tajuk dari animasi widget. Kita pertama kali membuat variasi untuk rujukan kanvas elemen di luar layar baru yang akan dibuat. Nilai defaultnya diset menjadi false, sehingga kita dapat mengetahui apakah gambar cache telah dibuat dan disimpan begitu skrip mulai berjalan:

Kita kemudian mengedit fungsi drawTitle()untuk pertama-tama memeriksa apakah kanvas gambartitleCachetelah dibuat. Jika belum, ia akan membuat gambar di luar skrin dan menyimpan rujukan ke titleCache:


Langkah 10: Kosongkan Kanvas dengan clearRect()

Langkah pertama dalam membina rangka animasi baru adalah dengan membersihkan kanvas saat ini. Ini boleh dilakukan dengan menyusun kanvas lebar lebar, atau menggunakan fungsi clearRect().

Mengatur ulang lebar mempunyai kesan samping juga membersihkan kanvas konteks saat ini kembali ke keadaan standarnya, yang dapat memperlambat segalanya. Menggunakan clearRect()selalu adalah cara yang lebih cepat dan lebih baik untuk membersihkan kanvas.

Pada fungsi main(), kita akan mengubah ini:

... menjadi ini:


Langkah 11: Menerapkan Lapisan

Jika anda pernah bekerja dengan perisian pengedit perisian atau video seperti Gimp atau Photoshop sebelumnya, maka anda sudah terbiasa dengan konsep dari lapisan, di mana gambar disusun dengan menumpuk banyak gambar di atas satu sama lain, dan masing-masing dapat dipilih dan diedit secara terpisah .

Diterapkan pada kanvas animasi adegan, setiap lapisan akan menjadi kanvas elemen berasingan, ditempatkan di atas satu sama lain menggunakan CSS untuk mewujudkan ilusi satu elemen. Sebagai teknik pengoptimalan, ia berfungsi sebaik-baiknya jika terdapat perbezaan yang jelas antara elemen-elemen depan latar dan latar belakang scene, dengan sebagian besar tindakan berlangsung di depan dalam. Latar belakang kemudian boleh ditarik pada kanvas elemen yang tidak banyak berubah antara animasi bingkai, dan latar belakang pada kanvas elemen yang lebih dinamis di atasnya. Dengan cara ini, keseluruhan adegan tidak perlu digambar semula untuk setiap animasi bingkai.

Sayangnya, widget animasi adalah contoh bagus dari sebuah adegan dimana kita tidak dapat menggunakan teknik ini dengan baik, karena elemen latar depan dan background sangat dianimasikan.


Langkah 12: Perbaharui Hanya Kawasan yang Berubah dari Animasi Animasi

Ini adalah teknik pengoptimalan lain yang sangat bergantung pada komposisi animasi gambar. Ini boleh digunakan semasa animasi adegan terkonsentrasi di sekitar kawasan tertentu persegi di kanvas. Kita kemudian boleh jelas dan menggambar ulang hanya di daerah itu.

Sebagai contoh, tajuk Sintel tetap tidak berubah sepanjang sebahagian besar animasi, jadi kita boleh meninggalkan kawasan itu tetap utuh ketika membersihkan kanvas untuk seterusnya animasi bingkai.

Untuk menerapkan teknik ini, kita mengganti baris yang memanggil fungsi menggambar tajuk dimain()dengan blok berikut:


Langkah 13: Minimalkan Sub-Pixel Rendering

Menambah sub-pixel atau anti-aliasing berlaku semasa penyemak imbas secara automatik mengaplikasikan grafis kesan untuk menghilangkan bergerigi tepi. Ini menghasilkan gambar dan animasi yang kelihatan lebih halus, dan otomatis diaktifkan setiap kali Anda menentukan fraksional koordinat dari jumlah keseluruhan saat menggambar ke kanvas.

Saat ini tidak ada standar tentang bagaimana hal itu harus dilakukan, jadi rendering subpiksel agak tidak konsisten di seluruh browser dalam hal output yang diberikan. Ini juga memperlambat laju saya membuat kerana browser harus melakukan beberapa perhitungan untuk menghasilkan efeknya. Oleh kerana kanvas anti-aliasing tidak dapat dimatikan secara langsung, satu-satunya cara untuk mengatasinya adalah dengan selalu menggunakan bilangan bulat di dalam gambar koordinat anda.

Kita akan menggunakan Math.floor()untuk memastikan bilangan dalam skrip kita apabila diperlukan. Contohnya, baris berikut di drawFilm():

... ditulis semula sebagai:


Langkah 14: Mengukur Hasilnya

Kami telah melihat beberapa kanvas animasi pengoptimalan teknik, dan kini adalah masa untuk mengkaji hasilnya.

Jadual ini menunjukkan rata-rata Render Times sebelum dan sesudah dan Canvas FPS. .API Canvas masih cukup baru dan berkembang setiap hari, jadi teruslah bereksperimen, menguji, mengeksplorasi dan berkongsi. Terima kasih telah membaca tutorial. Kita boleh melihat beberapa peningkatan yang signifikan di semua pelayar, walaupun Chrome hanya menghampiri pencapaian tujuan awal Render Time maksimum 33ms. Ini bermakna masih banyak pekerjaan yang perlu dilakukan untuk mendapatkan sasaran tersebut.

Kita boleh meneruskan dengan menerapkan JavaScript optimasi teknik yang lebih umum, dan jika itu masih gagal, mungkin mempertimbangkan untuk menurunkan animasinya dengan menghapus beberapa peringatan. Tetapi kita tidak akan melihat teknik lain hari ini, kerana fokusnya adalah optimasi dari animasi <canvas>.

API Canvas masih cukup baru dan berkembang setiap hari, jadi teruslah bereksperimen, menguji, mengeksplorasi dan berbagi. Terima kasih telah membaca tutorial.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.