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?

你可能感兴趣的:(javascript,canvas)