for Chrome, drawImage from canvasA to canvasB

Chrome浏览器下,使用drawImage函数,从Canvas A拷贝到Canvas B, 性能经常出乎我意料(的差),折腾半天找到原因,特此记录。

以下内容,搬运自The Chromium Projects / report bugs,为确保无误,建议查看原答案。

size of canvas A size of canvas B performance
1 >= 256 * 256 >= 256 * 256 very good
2 < 256 * 256 < 256 * 256 good
3 < 256 * 256 >= 256 * 256 not bad
4 >= 256 * 256 < 256 * 256 bad
  • 1:两个canvas大小均大于256*256,都使用显卡渲染(HW)
  • 2:两个canvas大小均小于256*256,都使用CPU渲染(SW)
  • 3:前者使用SW,后者使用HW(RAM拷贝到GPU)
  • 4:前者使用HW,后者使用SW(GPU拷贝到RAM,性能极差,不过可以通过设置chrome://flags/ Accelerated 2D canvas 为 Disabled,来禁用GPU加速,性能会有提高)

可以发现,当源或目标画布在RAM中而另一个画布在GPU上时,会发生减速。

当画布尺寸比较大,比如 8192*8192,这时候就需要查看GPU支持最大纹理大小,当GPU无法为整个画布分配存储单元时,会回到CPU渲染途径,然而靠CPU渲染这么大的画布时,性能是比较差的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。