Teknik peningkatan prestasi HTML5 Kanvas dan perkongsian pengalaman

Teknik peningkatan prestasi HTML5 Kanvas dan perkongsian pengalaman_html5 teknik tutorial

WBOY

Lepaskan： 2016-05-16 15:49:11

asal

1645 orang telah melayarinya

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:

Salin kod

Kod 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:

Salin kod

Kodnya adalah seperti berikut:

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

Kodnya adalah seperti berikut:

untuk (var i = 0; i < points.length - 1; i ) { var p1 = points[i ]; var p2 = mata[i 1];

context.beginPath(); p2.y);

context.stroke();

}

Kod yang diubah suai dengan prestasi yang lebih tinggi adalah seperti berikut:

Salin kod
Kodnya adalah seperti berikut:

context.beginPath(); = 0; i < mata.panjang - 1 ; i ) { var p1 = mata[i]; .y); context.lineTo( p2.x, p2.y); } context.stroke();

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 = (i % 2 ? "biru" : "merah");

context.fillRect(0, i * GAP, 400, GAP ; 🎜>Kodnya adalah seperti berikut:

// walaupun

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.

HTML yang mentakrifkan lapisan Kanvas adalah seperti berikut:

Salin kod

Kod adalah seperti berikut: