Teknik peningkatan prestasi HTML5 Kanvas dan perkongsian pengalaman_html5 teknik tutorial

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:








Jika tidak perlu, cuba elakkan menggunakan kesan khas lukisan, seperti bayang-bayang, kabur, dsb.

Elakkan menggunakan koordinat titik terapung
Apabila melukis grafik, panjang dan koordinat hendaklah integer bukannya nombor titik terapung Sebabnya ialah Canvas menyokong lukisan separuh piksel dan akan dilaksanakan algoritma interpolasi berdasarkan tempat perpuluhan Untuk mencapai kesan anti-aliasing imej yang dilukis, sila jangan pilih nilai titik terapung melainkan perlu.

Kosongkan kandungan lukisan pada Kanvas:
context.clearRect(0, 0, canvas.width,canvas.height)
Tetapi sebenarnya terdapat hack yang serupa dalam Canvas Kaedah pembersihan:
canvas.width = canvas.width;
juga boleh mencapai kesan mengosongkan kandungan pada kanvas, tetapi ia mungkin tidak disokong pada sesetengah penyemak imbas.