HTML5 () canvas performance and recovery ()

Question

So, the problem I ran into is that when developing an application for an HTML5 canvas, I need to use a lot of transformations (i.e. translate, rotate, scale), and therefore a lot of calls are made in the context of .save () and context .restore (). Performance decreases very quickly even with very little drawing (because save () and restore () are called in the loop as many times as possible). Is there an alternative to using these methods, but you can still use conversions? Thank!

Answer 1

Animation and game tips.

Avoid saving recovery

setTransform, .

, , GPU && & 2D . / , , /, ( ), , .

- , . (60-), FX , , .

, 2D. , .

ctx.setTransform, ctx.transform

, , , , , , .

, setTransform, . , , .

ctx.setTransform(scaleX,0,0,scaleY,posX,posY); // scale and translate in one call

, javascript x, y ( 4 setTransform) , .

. , x y, , , ,

// image is the image. Must have an array of sprites
// image.sprites = [{x:0,y:0,w:10,h:10},{x:20,y:0,w:30,h:40},....]
// where the position and size of each sprite is kept
// spriteInd is the index of the sprite
// x,y position on sprite center
// cx,cy location of sprite center (I also have that in the sprite list for some situations)
// sx,sy x and y scales
// r rotation in radians
// a alpha value
function drawSprite(image, spriteInd, x, y, cx, cy, sx, sy, r, a){
    var spr = image.sprites[spriteInd];
    var w = spr.w;
    var h = spr.h;
    ctx.setTransform(sx,0,0,sy,x,y); // set scale and position
    ctx.rotate(r);
    ctx.globalAlpha = a;
    ctx.drawImage(image,spr.x,spr.y,w,h,-cx,-cy,w,h); // render the subimage
}

1000 + . Firefox ( ) 2000+ ( - 1024 2048). 256 * 256

15 , , , . (.. ),

function drawSprite(image, spriteInd, x, y, a){
    var spr = image.sprites[spriteInd];
    var w = spr.w;
    var h = spr.h;
    ctx.setTransform(1,0,0,1,x,y); // set scale and position
    ctx.globalAlpha = a;
    ctx.drawImage(image,spr.x,spr.y,w,h,0,0,w,h); // render the subimage
}

, , ..

function drawSprite(image, spriteInd, x, y,s,r,a){
    var spr = image.sprites[spriteInd];
    var w = spr.w;
    var h = spr.h;
    ctx.setTransform(s,0,0,s,x,y); // set scale and position
    ctx.rotate(r);
    ctx.globalAlpha = a;
    ctx.drawImage(image,spr.x,spr.y,w,h,-w/2,-h/2,w,h); // render the subimage
}

function drawSprite(image){
    var s = Math.max(image.width / canvasWidth, image.height / canvasHeight); // canvasWidth and height are globals
    ctx.setTransform(s,0,0,s,0,0); // set scale and position
    ctx.globalAlpha = 1;
    ctx.drawImage(image,0,0); // render the subimage
}

, . ( )

// all coords are relative to the global transfrom
function drawGlobalSprite(image, spriteInd, x, y, cx, cy, sx, sy, r, a){
    var spr = image.sprites[spriteInd];
    var w = spr.w;
    var h = spr.h;
    // m1 to m6 are the global transform
    ctx.setTransform(m1,m2,m3,m4,m5,m6); // set playfield
    ctx.transform(sx,0,0,sy,x,y); // set scale and position
    ctx.rotate(r);
    ctx.globalAlpha = a * globalAlpha; (a real global alpha)
    ctx.drawImage(image,spr.x,spr.y,w,h,-cx,-cy,w,h); // render the subimage
}

, .

- ( ), , fill, stroke, filltext, arc, rect, moveTo, lineTo, . , , .

GPU

. 2. (2,4,8,16,32,64,128....), . .. 1024 512 2048 128, .

, 2D- , , , . , 300 300, , , , 512 512. , 2,5 , , . , , , .

, , RAM, , , ( ).

GC

- , GC ( ) . ( , ), ( ), . , (, ). , , , , , .

, , , 1000- ZERO GC. ( , ).

GC 5% , , .