Bagaimanakah Saya Boleh Mengosongkan Kanvas dengan Cekap untuk Melukis Semula dalam JavaScript?

Membersihkan Kanvas untuk Lukisan Semula yang Cekap

Apabila bekerja dengan elemen kanvas, mungkin perlu mengalih keluar lukisan sebelumnya dan operasi komposit untuk memulakan baharu . Ini amat penting untuk animasi atau aplikasi interaktif di mana kanvas dikemas kini secara berterusan.

Membersihkan Kanvas

Untuk mengosongkan kanvas untuk lukisan semula dengan cekap, kaedah pilihan adalah dengan gunakan kaedah clearRect(). Ini mengosongkan kawasan segi empat tepat pada kanvas, mengalih keluar mana-mana lukisan yang terdapat dalam kawasan itu.

Sintaks:

const context = canvas.getContext('2d');
context.clearRect(x, y, width, height);

• konteks: Konteks lukisan daripada elemen kanvas.
• x: Koordinat-x penjuru kiri sebelah atas kawasan segi empat tepat yang hendak dikosongkan.
• y: Koordinat-y penjuru kiri sebelah atas kawasan segi empat tepat yang hendak dikosongkan.
• lebar: Lebar kawasan segi empat tepat yang hendak dikosongkan.
• tinggi: Ketinggian kawasan segi empat tepat dikosongkan.

Contoh:

Untuk mengosongkan keseluruhan kanvas, anda boleh menggunakan:

const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);

Ini akan mengosongkan semua lukisan sebelumnya , imej dan operasi komposit, meninggalkan kanvas kosong untuk melukis semula.

ClearRect lwn. Melukis Segi Empat:

Apabila melukis semula pada kanvas, lebih cekap menggunakan clearRect() berbanding melukis segi empat tepat baharu di atas yang lama satu. Melukis segi empat tepat memerlukan kanvas untuk mengemas kini lebih banyak piksel daripada yang diperlukan, yang boleh memperlahankan prestasi. Walau bagaimanapun, dalam kes tertentu, lukisan segi empat tepat mungkin lebih baik atas sebab estetik atau untuk mengekalkan aspek lukisan tertentu.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengosongkan Kanvas dengan Cekap untuk Melukis Semula dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!