Bagikan pengalaman dalam keterampilan peningkatan kinerja kanvas HTML5

Komentar: Artikel ini menjelaskan cara menggunakan teknologi cache untuk mengimplementasikan pra-menarik, mengurangi gambar berulang konten CanVS, dan menghindari menggunakan koordinat titik mengambang untuk meningkatkan kinerja kanvas HTML5. Teman yang tertarik dapat merujuknya, berharap ini akan membantu semua orang.

Sering kali, kami menggambar dan memperbarui kanvas, dan kami selalu menyimpan beberapa konten yang tidak berubah untuk konten ini.

Cache harus ditarik sebelumnya, tidak setiap penyegaran.

Kode ini ditarik secara langsung sebagai berikut:

Context.font = "24px Arial";

context.fillstyle = "biru";

Context.FillText ("Harap tekan <SCS> ke Game Keluar", 5,50);

requestanimationframe (render);

Menggunakan Teknik Pra-Lukisan Cache:

fungsi render (konteks) {

Context.DrawImage (MTEXT_CANVAS, 0, 0);

requestanimationframe (render);

}

function drawText (konteks) {

mtext_canvas = document.createelement ("canvas");

MTEXT_CANVAS.WIDTH = 450;

MTEXT_CANVAS.HEIGHT = 54;

var m_context = mtext_canvas.getContext ("2d");

m_context.font = "24px Arial";

m_context.fillstyle = "blue";

m_context.fillText ("Silakan tekan <ECC> untuk keluar dari game", 5,50);

}

Saat menggunakan teknologi menggambar cache kanvas, ingatlah untuk cache ukuran objek kanvas kurang dari ukuran kanvas yang sebenarnya. Cobalah untuk meletakkan operasi menggambar garis lurus, dan mencoba menggambarnya sekaligus. Kode yang buruk adalah sebagai berikut:

untuk (var i = 0; i <points.length - 1; i ++) {

var p1 = poin [i];

var p2 = poin [i+1];

context.beginpath ();

Context.moveto (p1.x, p1.y);

context.lineto (p2.x, p2.y);

Context.stroke ();

}

Kode dengan kinerja yang lebih tinggi setelah modifikasi adalah sebagai berikut:

context.beginpath ();

untuk (var i = 0; i <points.length - 1; i ++) {

var p1 = poin [i];

var p2 = poin [i+1];

Context.moveto (p1.x, p1.y);

context.lineto (p2.x, p2.y);

}

Context.stroke ();

Hindari sering beralih dari keadaan menggambar kanvas yang tidak perlu. Contoh gaya menggambar yang sering beralih adalah sebagai berikut:

var gap = 10;

untuk (var i = 0; i <10; i ++) {

context.fillstyle = (i % 2? "Biru": "merah");

context.fillrect (0, i * gap, 400, gap);

}

Hindari pergantian status gambar yang sering, dan kode gambar kinerja yang lebih baik adalah sebagai berikut:

// bahkan

context.fillstyle = "merah";

untuk (var i = 0; i <5; i ++) {

context.fillrect (0, (i * 2) * celah, 400, celah);

}

// aneh

context.fillstyle = "biru";

untuk (var i = 0; i <5; i ++) {

context.fillrect (0, (i * 2+1) * celah, 400, celah);

}

Saat menggambar, hanya menggambar area yang perlu diperbarui, dan menghindari gambar duplikat yang tidak perlu dan overhead tambahan kapan saja. Untuk gambar adegan yang kompleks, teknologi gambar hierarkis digunakan, yang dibagi menjadi foreground dan latar belakang gambar. Tentukan lapisan kanvas

HTML adalah sebagai berikut:

<an kanvas>

</ Canvas>

<an kanvas>

<span> </canvas>

</span>

Jika tidak perlu, cobalah untuk menghindari efek menggambar seperti bayangan, kabur, dll.

Hindari menggunakan koordinat titik mengambang

Saat menggambar grafik, bilangan bulat harus dipilih alih-alih bilangan titik mengambang. Alasannya adalah bahwa Canvas mendukung gambar setengah pixel untuk mengimplementasikan algoritma interpolasi berdasarkan tempat desimal untuk mencapai efek anti-aliasing dari gambar menggambar. Jika tidak perlu, jangan pilih nilai-nilai titik mengambang.

Hapus konten gambar di kanvas:

Context.ClearRect (0, 0, Canvas.Width, Canvas.Height)

Namun pada kenyataannya, ada juga metode seperti peretasan di kanvas:

canvas.width = canvas.width;

Ini juga dapat mencapai efek membersihkan konten pada kanvas, tetapi mungkin tidak didukung pada beberapa browser.