canvas绘图性能优化 - Lapsec

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？