常梦网 常梦网

canvas绘图性能优化 - Lapsec

时间: 2024-04-02  热度:

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?

相关阅读