canvas绘图性能优化

canvas性能优化的几个点

测试的几个点:
1、遍历图像数据;
2、对比drawImage()与putImageData()的绘图效率;
3、使用drawImage()来绘制canvas,而非普通图像
4、在使用drawImage()绘图时缩放图像;

测试神器:http://jsperf.com/

对比drawImage(HTMLImage)、putImageData(HTMLCanvas)与putImageData()的绘图效率

drawImage()比putImageData要快一些,而且drawImage()可以把某个canvas绘制到另一个canvas上,绘制速度与绘制图像差不多;

遍历图像数据

·避在循环体内直接访问对象属性,应该将其存放在局部变量中;
·用循环计数器来遍历完整像素,而非像素分量;
·逆向遍历与移位的效果不好;
·频繁调用getImageData()很消耗性能;
对于<用循环计数器来遍历完整像素,而非像素分量>,这个有点奇怪,用4为基准跳跃反而比全部循环要慢,事实如此?But why?

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值