Gunakan teknologi caching untuk melaksanakan pralukisan untuk mengurangkan lukisan berulang kandungan Canvs Banyak kali apabila kami melukis dan mengemas kini pada Kanvas, kami sentiasa mengekalkan beberapa kandungan yang tidak berubah, yang mana kandungan
sepatutnya dipra. -Caching yang ditarik dan bukannya menyegarkan setiap kali.
Kod lukisan langsung adalah seperti berikut:
context .font="24px Arial";
context.fillStyle="blue";
context.fillText("Sila tekan untuk keluar dari permainan",5,50);
requestAnimationFrame(render) ;
Gunakan teknologi pralukisan cache:
fungsi render(konteks) {
context.drawImage(mText_canvas, 0, 0); }
fungsi drawText(konteks) {
mText_canvas = document.createElement("kanvas");
mText_canvas.width = 450; getContext("2d");
m_context. "24px Arial";
m_context.fillStyle="blue"; ,50);
}
Apabila menggunakan teknologi lukisan cache Canvas, pastikan anda ingat bahawa saiz objek Canvas yang dicache hendaklah lebih kecil daripada saiz Kanvas sebenar. Cuba gabungkan operasi lukisan mata lurus, dan cuba selesaikan lukisan itu pada satu masa Kod buruk adalah seperti berikut:
Salin kod
context.stroke();
}
Kod yang diubah suai dengan prestasi yang lebih tinggi adalah seperti berikut:
Salin kod
Kodnya adalah seperti berikut:
Elakkan penukaran keadaan lukisan Kanvas yang tidak perlu . Contoh penukaran gaya lukisan yang kerap adalah seperti berikut:
Salin kod
Kodnya adalah seperti berikut:
var GAP = 10;
untuk (var i=0; i<10; i ) { context.fillStyle = "merah";
untuk (var i = 0; i < 5; i ) {
context.fillRect(0, (i*2) * GAP, 400, GAP
}
// ganjil
context.fillStyle = "biru";
untuk ( var i = 0; i < 5; i ) {
context.fillRect(0, (i*2 1) * GAP , 400, GAP);
}
lukis Apabila melukis, hanya kawasan yang perlu dikemas kini dilukis, dan lukisan berulang yang tidak perlu serta overhed tambahan mesti dielakkan pada bila-bila masa. Untuk pemaparan pemandangan yang kompleks, teknologi pemaparan berlapis digunakan dan latar depan serta latar belakang dilukis secara berasingan.
Kod adalah seperti berikut: