HTML5 drawImage性能问题
2015-09-08 16:45
501 查看
最近做游戏发现,为了节省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一下就上去了。。。。
我的图片尺寸为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一下就上去了。。。。
相关文章推荐
- H5页面在线制作工具搜集
- html5培训课程培训 顺利完成获得宝贵财富
- H5教程:移动页面性能优化
- 玩转HTML5移动页面(优化篇)
- 玩转HTML5移动页面(动效篇)
- HTML5获取地理位置定位信息
- 玩转html5(四)----使用canvas画一个时钟
- html5新的度量单位rem 更完美适配
- html5的画布学习小总结
- HTML5实现摇一摇
- 无插件纯Web HTML5 3D机房 进阶篇(新增设备、线缆、巡查等功能)
- 10款最佳HTML5绘图工具
- 使用APICloud编写优雅的HTML5代码《二》:ajax、文件上传
- 安卓 native 和 H5 的交互
- 禁止Html5在手机上屏幕页面缩放
- HTML5结合ajax实现文件上传以及进度显示
- HTML5本地存储——IndexedDB(二:索引)
- HTML5本地存储——IndexedDB(一:基本使用)
- 眼镜h5
- HTML5 postMessage 和 onmessage API 详细应用