Canvas performance Tips: The canvas performance skills you must know

Source: Internet
Author: User
Tags error code eval sleep

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



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.