Canvas performance Tips: The canvas performance skills you must know

Article Introduction: are you still complaining that your canvas demo is hovering below 10 frames? Are you still bothering to open your own writing application and hear the cup fan turn? Are you writing a JavaScript canvas library? So here are nine points you need to know!

Are you still complaining that your canvas demo is hovering below 10 frames? Are you still bothering to open your own writing application and hear the cup fan turn? Are you writing a JavaScript canvas library? So here are nine points you need to know!

I. Pre-rendering
Error code:

var canvas = document.getElementById ("MyCanvas");
var context = This.canvas.getContext (' 2d ');
var drawasync = eval (jscex.compile ("Async", function () {
while (true) {
Drawmario (context);
$await (Jscex.Async.sleep (1000));
}
}))
Drawasync (). Start ();
Correct code:

var canvas = document.getElementById ("MyCanvas");
var context = This.canvas.getContext (' 2d ');
var M_canvas = document.createelement (' canvas ');
M_canvas.width = 64;
M_canvas.height = 64;
var m_context = M_canvas.getcontext (' 2d ');
Drawmario (M_context);
var drawasync = eval (jscex.compile ("Async", function () {
while (true) {
Context.drawimage (m_canvas, 0, 0);
$await (Jscex.Async.sleep (1000));
}
}))
Drawasync (). Start ();
The smaller the width and height of the m_canvas here, the better.

Two. Call Canvasapi as little as possible
Error code:

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 ();
}
Correct code:

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 ();
Three. Change canvas status as little as possible
Error code:

for (var i = 0; I < stripes; i++) {
Context.fillstyle = (i% 2?) COLOR1:COLOR2);
Context.fillrect (i * gap, 0, Gap, 480);
}
Correct code:

Context.fillstyle = COLOR1;
for (var i = 0; i < STRIPES/2; i++) {
Context.fillrect ((i * 2) * gap, 0, Gap, 480);
}
Context.fillstyle = COLOR2;
for (var i = 0; i < STRIPES/2; i++) {
Context.fillrect ((i * 2 + 1) * gap, 0, Gap, 480);
}
Four. The scope of the re-rendering is as small as possible
Error code:

Context.fillrect (0, 0, canvas.width, canvas.height);
Correct code:

Context.fillrect (20, 20, 100, 100);
Five. Use multilayer canvas for complex scenes
<canvas width= "height=" "style=" position:absolute; Z-index:0 ">
</canvas>
<canvas width= "height=" "style=" position:absolute; Z-index:1 ">
</canvas>
Six. Do not use Shadow
Context.shadowoffsetx = 5;
Context.shadowoffsety = 5;
Context.shadowblur = 4;
Context.shadowcolor = ' Rgba (255, 0, 0, 0.5) ';
Context.fillrect (20, 20, 150, 100);
Seven. Clear Canvas
Detailed Performance differences:
Http://simonsarris.com/blog/346-how-you-clear-your-canvas-matters
Under normal circumstances: Clearrect performance is superior to fillrect than canvas.width = Canvas.width;

Eight. Pixel level operation as far as possible with integers
Several ways to take integers:

Rounded = (0.5 + somenum) 0;
rounded = ~ ~ (0.5 + somenum);
Rounded = (0.5 + somenum) << 0;
Nine. Use Jscex to make animation effect
var drawasync = eval (jscex.compile ("Async", function () {
while (true) {
Context.drawimage (m_canvas, 0, 0);
$await (Jscex.Async.sleep (1000));
}
}))
Drawasync (). Start ();
10. Other
Rendering-independent computations to the worker

Complex calculations are given to the engine (write yourself, or use open source), such as 3D, physics

Cache load good picture, canvas painting canvas, not painting image