แบ่งปันประสบการณ์ในทักษะการปรับปรุงประสิทธิภาพการทำงานของ HTML5 Canvas

ความคิดเห็น: บทความนี้อธิบายวิธีการใช้เทคโนโลยีแคชเพื่อใช้การวาดล่วงหน้าลดการวาดภาพเนื้อหา CANVS ซ้ำ ๆ และหลีกเลี่ยงการใช้พิกัดจุดลอยตัวเพื่อปรับปรุงประสิทธิภาพของ HTML5 Canvas เพื่อนที่สนใจสามารถอ้างถึงได้โดยหวังว่ามันจะเป็นประโยชน์กับทุกคน

หลายครั้งที่เราวาดและอัปเดตบนผืนผ้าใบและเรามักจะเก็บเนื้อหาที่ไม่เปลี่ยนแปลงไว้สำหรับเนื้อหาเหล่านี้

แคชควรถูกวาดล่วงหน้าไม่ใช่การรีเฟรชทุกครั้ง

รหัสถูกวาดโดยตรงดังนี้:

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;

นอกจากนี้ยังสามารถบรรลุผลของการล้างเนื้อหาบนผืนผ้าใบ แต่อาจไม่ได้รับการสนับสนุนในเบราว์เซอร์บางตัว