ความคิดเห็น: บทความนี้อธิบายวิธีการใช้เทคโนโลยีแคชเพื่อใช้การวาดล่วงหน้าลดการวาดภาพเนื้อหา CANVS ซ้ำ ๆ และหลีกเลี่ยงการใช้พิกัดจุดลอยตัวเพื่อปรับปรุงประสิทธิภาพของ HTML5 Canvas เพื่อนที่สนใจสามารถอ้างถึงได้โดยหวังว่ามันจะเป็นประโยชน์กับทุกคน
ใช้เทคโนโลยีการแคชเพื่อให้บรรลุการวาดล่วงหน้าเพื่อลดการวาดภาพ CANVS ซ้ำ ๆ ซ้ำ ๆหลายครั้งที่เราวาดและอัปเดตบนผืนผ้าใบและเรามักจะเก็บเนื้อหาที่ไม่เปลี่ยนแปลงไว้สำหรับเนื้อหาเหล่านี้
แคชควรถูกวาดล่วงหน้าไม่ใช่การรีเฟรชทุกครั้ง
รหัสถูกวาดโดยตรงดังนี้:
Context.font = "24px Arial";
Context.fillstyle = "Blue";
Context.fillText ("โปรดกด <Sc> เพื่อออกจากเกม", 5,50);
RequestAnimationFrame (render);
การใช้เทคนิคการทาสีล่วงหน้าแคช:
ฟังก์ชั่นเรนเดอร์ (บริบท) {
Context.DrawImage (mtext_canvas, 0, 0);
RequestAnimationFrame (render);
-
ฟังก์ชั่น DrawText (บริบท) {
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 ("โปรดกด <esc> เพื่อออกจากเกม", 5,50);
-
เมื่อใช้เทคโนโลยีการวาดแคช Canvas อย่าลืมแคชขนาดวัตถุ Canvas น้อยกว่าขนาดผ้าใบจริง พยายามที่จะรวบรวมการวาดเส้นตรงเข้าด้วยกันและพยายามวาดพวกเขาในครั้งเดียว รหัสที่ไม่ดีมีดังนี้:
สำหรับ (var i = 0; i <points.length - 1; i ++) {
var p1 = คะแนน [i];
var p2 = คะแนน [i+1];
Context.BeginPath ();
Context.moveto (P1.X, P1.Y);
Context.lineto (p2.x, p2.y);
Context.stroke ();
-
รหัสที่มีประสิทธิภาพสูงกว่าหลังจากการแก้ไขมีดังนี้:
Context.BeginPath ();
สำหรับ (var i = 0; i <points.length - 1; i ++) {
var p1 = คะแนน [i];
var p2 = คะแนน [i+1];
Context.moveto (P1.X, P1.Y);
Context.lineto (p2.x, p2.y);
-
Context.stroke ();
หลีกเลี่ยงการสลับสถานะการวาดภาพผ้าใบที่ไม่จำเป็นบ่อยครั้ง ตัวอย่างของรูปแบบการเปลี่ยนรูปแบบบ่อยครั้งมีดังนี้:
var gap = 10;
สำหรับ (var i = 0; i <10; i ++) {
context.fillstyle = (i % 2? "blue": "red");
Context.fillrect (0, i * Gap, 400, Gap);
-
หลีกเลี่ยงการสลับสถานะการวาดบ่อยครั้งและรหัสการวาดประสิทธิภาพที่ดีขึ้นมีดังนี้:
// สม่ำเสมอ
บริบท fillstyle = "สีแดง";
สำหรับ (var i = 0; i <5; i ++) {
Context.fillrect (0, (i * 2) * Gap, 400, Gap);
-
// แปลก
Context.fillstyle = "Blue";
สำหรับ (var i = 0; i <5; i ++) {
Context.fillrect (0, (i * 2+1) * Gap, 400, Gap);
-
เมื่อวาดเพียงวาดเฉพาะพื้นที่ที่ต้องได้รับการปรับปรุงและหลีกเลี่ยงการวาดซ้ำที่ไม่จำเป็นและค่าใช้จ่ายเพิ่มเติมได้ตลอดเวลา สำหรับการวาดภาพฉากที่ซับซ้อนมีการใช้เทคโนโลยีการวาดแบบลำดับชั้นซึ่งแบ่งออกเป็นเบื้องหน้าและการวาดพื้นหลัง กำหนดเลเยอร์ผ้าใบ
HTML มีดังนี้:
<Canvas>
</sanvas>
<Canvas>
<span> </sanvas>
</span>
หากไม่จำเป็นพยายามหลีกเลี่ยงเอฟเฟกต์การวาดเช่นเงาพร่ามัว ฯลฯ
หลีกเลี่ยงการใช้พิกัดจุดลอยตัว
เมื่อวาดกราฟควรเลือกจำนวนเต็มแทนที่จะเป็นหมายเลขจุดลอยตัว เหตุผลก็คือผ้าใบรองรับการวาดครึ่งพิกเซลเพื่อใช้อัลกอริทึมการแก้ไขตามสถานที่ทศนิยมเพื่อให้ได้ผลต่อต้านการเป็นนามธรรมของการวาดภาพ หากไม่จำเป็นโปรดอย่าเลือกค่าจุดลอยตัว
ล้างเนื้อหาการวาดบนผืนผ้าใบ:
context.clearRect (0, 0, Canvas.width, Canvas.height)
แต่ในความเป็นจริงยังมีวิธีการแฮ็คในผืนผ้าใบ:
canvas.width = canvas.width;
นอกจากนี้ยังสามารถบรรลุผลของการล้างเนื้อหาบนผืนผ้าใบ แต่อาจไม่ได้รับการสนับสนุนในเบราว์เซอร์บางตัว