HTML5 Canvas performance improvement techniques and experience sharing_html5 tutorial techniques

Use caching technology to implement pre-drawing to reduce repeated drawing of Canvs content
Many times when we draw and update on Canvas, we always retain some unchanged content, for which content
should be pre-drawn Caching instead of refreshing every time.
The direct drawing code is as follows:

Copy the code

The code is as follows:

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

Use cache pre-drawing technology:

Copy the code

The code is as follows:

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 Canvas cache drawing technology, be sure to remember that the size of the cached Canvas object should be smaller than the actual Canvas size. Try to put the operations of drawing straight points together, and try to complete the drawing at one time. A bad code is as follows:

Copy code

The 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 modified code with higher performance is as follows:

Copy code

The code 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 unnecessary frequent switching of Canvas drawing state. An example of frequent switching of drawing style is as follows:

Copy code

The code 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 ; 🎜>

The 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);

}

draw When drawing, only the area that needs to be updated is drawn, and unnecessary repeated drawing and additional overhead must be avoided at any time. For complex scene rendering, layered rendering technology is used, and the foreground and background are drawn separately. The
HTML that defines the Canvas layer is as follows:





Copy the code

The code is as follows:

If it is not necessary, try to avoid using drawing special effects, such as shadows, blur, etc.

Avoid using floating point coordinates
When drawing graphics, the length and coordinates should be integers instead of floating point numbers. The reason is that Canvas supports half-pixel drawing and will implement the interpolation algorithm based on decimal places. To achieve the anti-aliasing effect of drawn images, please do not select floating point values ​​unless necessary.

Clear the drawing content on Canvas:
context.clearRect(0, 0, canvas.width,canvas.height)
But there is actually a similar hack in Canvas The clearing method:
canvas.width = canvas.width;
can also achieve the effect of clearing the content on the canvas, but it may not be supported on some browsers.