HTML5 drawImage性能问题

标签：

最近做游戏发现，为了节省HTTP请求，把很多组动画放到了一张图片上，也就是传说中的雪碧图，但是用drawImage从图片上截取一部分绘制在canvas上时会非常慢。

我的图片尺寸为5000*7000

　　ctx.drawImage(  img,0,0,100,100,0,0,100,100 )

居然会耗时 125 毫秒 这简直不能忍。[环境：win10 Chorme Version 44.0.2403.125 CPU:AMD A8 GPU:HD8750]

解决方案：

　　把需要用到的帧先截取出来，并保存。

var imgBuffer={}；
for (var i in this.textureMap){
　　tTemp=this.textureMap[i];

　　//这个函数返回一个对象 {  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
　　};
}

然后需要绘制的时候直接充imgBuffer中读取就好了，fps一下就上去了。。。。

HTML5 drawImage性能问题

标签：

原文地址：http://www.cnblogs.com/aepkill/p/4792227.html