Artikel ini terutama memperkenalkan tutorial tentang penggunaan kanvas berlapis untuk mengoptimalkan rendering HTML5. Itu berasal dari dokumen teknis pengembang situs web IBM resmi. Teman yang membutuhkannya dapat merujuk pada pengantar berikut
Biasanya, saat bermain game 2D atau merender kanvas HTML5, optimisasi harus dilakukan untuk menggunakan beberapa lapisan untuk membangun adegan sintetis. Dalam rendering tingkat rendah seperti OpenGL atau WebGL, rendering dilakukan dengan membersihkan dan menggambar bingkai adegan demi bingkai. Setelah rendering diimplementasikan, permainan perlu dioptimalkan untuk mengurangi jumlah rendering, dan biaya yang diperlukan bervariasi dari situasi ke situasi. Karena kanvas adalah elemen DOM, ini memungkinkan Anda untuk melapisi beberapa kanvas sebagai metode optimasi.
Singkatan Umum
DOM: Model Objek Dokumen
HTML: Bahasa Markup HyperText (Bahasa Markup Hypertext)
Artikel ini akan mengeksplorasi rasionalitas kanvas layering. Memahami pengaturan DOM untuk mengaktifkan kanvas berlapis. Menggunakan optimasi hierarkis membutuhkan berbagai praktik. Artikel ini juga akan mengeksplorasi beberapa konsep dan teknik untuk strategi optimasi yang memperluas pendekatan hierarkis.
Anda dapat mengunduh kode sumber untuk contoh yang digunakan dalam artikel ini.
Pilih strategi optimasi
Memilih strategi optimasi terbaik bisa sulit. Saat memilih skenario hierarkis, Anda perlu mempertimbangkan bagaimana skenario disusun. Rendering objek tetap pada layar besar sering kali membutuhkan penggunaan kembali beberapa komponen, yang merupakan kandidat yang sangat baik untuk penelitian. Efek seperti paralaks atau entitas animasi sering membutuhkan banyak ruang layar yang bervariasi. Yang terbaik adalah memperhatikan situasi ini ketika menjelajahi strategi optimasi terbaik Anda. Meskipun optimalisasi hierarkis kanvas membutuhkan beberapa teknik yang berbeda, kinerja akan sering sangat ditingkatkan setelah penerapan teknik ini yang benar.
Lapisan Pengaturan
Saat menggunakan metode hierarkis, langkah pertama adalah mengatur kanvas pada DOM. Biasanya, ini sederhana, hanya menentukan elemen kanvas dan meletakkannya di DOM, tetapi lapisan kanvas mungkin memerlukan beberapa gaya ekstra. Saat menggunakan CSS, ada dua persyaratan untuk berhasil menerapkan hierarki kanvas:
Setiap elemen kanvas harus hidup berdampingan dalam posisi yang sama di viewport.
Setiap kanvas harus terlihat di bawah kanvas lain.
Gambar 1 menunjukkan konsep tumpang tindih umum di balik pengaturan lapisan.
Gambar 1. Contoh Lapisan
Langkah -langkah untuk mengatur lapisan adalah sebagai berikut:
Tambahkan gaya penentuan posisi elemen kanvas untuk mendukung hierarki.
Gaya elemen kanvas untuk menghasilkan latar belakang transparan.
Atur tumpukan tumpang tindih kanvas
Membuat tumpukan overlay di CSS mungkin memerlukan sedikit gaya. Ada banyak cara untuk tumpang tindih menggunakan HTML dan CSS. Contoh -contoh dalam artikel ini menggunakan tag <div> untuk berisi kanvas. Tag <div> menentukan ID unik yang menerapkan gaya untuk elemen kanvas HTML5 anaknya, seperti yang ditunjukkan pada Listing 1.
Daftar 1. Gaya penentuan posisi kanvas
Kode CSS menyalin konten ke clipboard