Recent game discovery, in order to save the HTTP request, put many groups of animation on a picture, that is, the legendary sprite, but the drawimage from the image to draw a portion of the canvas will be very slow.
My picture size is 5000*7000
Ctx.drawimage (img,0,0,100,100,0,0,100,100)
It's going to take 125 milliseconds . [Environment: Win10 chorme Version 44.0.2403.125 cpu:amd A8 gpu:hd8750]
Solution:
Take the required frames first and save them.
var imgbuffer={};
for (var i in This.texturemap) {
Ttemp=this.texturemap[i];
This function returns an object {Canvas:canvas,ctx:canvas.getcontext (' 2d ')}
Tobj=createemptycanvas (TTEMP.W,TTEMP.H);
Tctx=tobj.ctx;
Tctx.drawimage (
This.texture,
Ttemp.x,
TTEMP.Y,
TTEMP.W,
TTemp.h,
0,
0,
TTEMP.W,
TTemp.h
);
imgbuffer[i]={
Img:tObj.canvas
};
}
And then need to draw when the direct charge imgbuffer read it, fps a bit on the up ....
HTML5 DrawImage Performance Issues