Improve the Performance of HTML5 Canvas,

Improve the Performance of HTML5 Canvas,

For details, click

I. Use cache technology to implement pre-drawing and reduce repeated Canvs content painting

Most of the time we draw and update on the Canvas, there will always be some unchanged content, for this content

Cache should be drawn in advance, rather than every refresh.

Directly draw the Code as follows:

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

Cache pre-rendering 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 technology, remember that the size of the cached Canvas object is smaller than the actual Canvas object.

Size. Try to put the operations of drawing a straight line point together, and try to complete the painting at a time. 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 with high performance after modification is 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 frequent switching between unnecessary Canvas rendering statuses. An example of a frequent switching between drawing styles 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 the drawing status, the rendering code with better performance 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);
}


During painting, only the area to be updated should be drawn, and unnecessary repeated painting and additional overhead should be avoided at any time.

The hierarchical rendering technology is used for drawing complex scenarios, which can be divided into foreground and background. Defines

The HTML is as follows:

 

Clear the painting content on the Canvas:

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

However, there is also a hack-like clearing method in Canvas:

Canvas. width = canvas. width;

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

<Blockquote> </blockquote>

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

 

For more html5 content, click