Tips for improving the performance of HTML5 canvas

For more information, please click here.

One: Using caching technology to achieve pre-draw, reduce the duplication of drawing Canvs content

Most of the time we draw and update on the canvas, always keep some unchanging content, for these content

The cache should be pre-drawn rather than refreshed every time.

The direct drawing code is as follows:

context.font="24px Arial";
context.fillStyle="blue";
context.fillText("Please press to exit game",5,50);
requestAnimationFrame(render);

Using cache pre-drawing technology:

function render(context) {
context.drawImage(mText_canvas, 0, 0);
requestAnimationFrame(render);
}

function drawText(context) {
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("Please press to exit game",5,50);
}

When using the canvas cache rendering technique, be sure to cache the canvas object size smaller than the actual canvas

Size. As far as possible to draw the line points of the operation together, and as far as possible to draw a complete, a bad code is as follows:

for (var i = 0; i < points.length - 1; i++) {
var p1 = points[i];
var p2 = points[i+1];
context.beginPath();
context.moveTo(p1.x, p1.y);
context.lineTo(p2.x, p2.y);
context.stroke();
}

The code for the later performance is modified as follows:

context.beginPath();
for (var i = 0; i < points.length - 1; i++) {
var p1 = points[i];
var p2 = points[i+1];
context.moveTo(p1.x, p1.y);
context.lineTo(p2.x, p2.y);
}
context.stroke();

Avoid unnecessary canvas drawing state switching frequently, an example of a frequent switch to draw a style is as follows

var GAP = 10;
for(var i=0; i<10; i++) {
context.fillStyle = (i % 2 ? "blue" : "red");
context.fillRect(0, i * GAP, 400, GAP);
}


To avoid frequent switching of drawing states, better-performing drawing code is as follows:

// even
context.fillStyle = "red";
for (var i = 0; i < 5; i++) {
context.fillRect(0, (i*2) * GAP, 400, GAP);
}

// odd
context.fillStyle = "blue";
for (var i = 0; i < 5; i++) {
context.fillRect(0, (i*2+1) * GAP, 400, GAP);
}


When drawing, draw only the areas that need to be updated, avoiding unnecessary duplication and extra overhead at all times.

For complex scene drawing using layered drawing technique, it is divided into foreground and background respectively. Defines the canvas layer's

The HTML is as follows:

 

Empty the drawing on the canvas:

Context.clearrect (0, 0, canvas.width,canvas.height)

But in fact, there is a kind of hack-like emptying method in canvas:

Canvas.width = Canvas.width;

You can also erase the content on the canvas, but it may not be supported on some browsers.

<blockquote></blockquote>

Learning Source: http://blog.csdn.net/jia20003/article/details/9225501

For more HTML5 content, please click here.

Tips for improving the performance of HTML5 canvas