我注意到,当源 Canvas 和目标 Canvas 相同时,drawImage 函数会慢 1000 倍以上。为什么是这样 ?哪些 Canvas 会进入 GPU,哪些不会? 任何有关此主题的帮助将不胜感激。
谢谢!
最佳答案
当您使用 Canvas 作为源和目标时,浏览器需要执行以下操作(涉及更精细的步骤,但这些是主要步骤):
- 创建要复制到的草稿位图
- 将当前位图复制到临时位图中
- 将草稿位图复制回原始位图的不同位置(即drawImage(canvas,...));
- 去除划痕
这而不是当您使用单独的 Canvas 时:
- 将源位图复制到目标位图
为什么不只是“位 block 传送”? official standard define 这个案例是这样的(我的重点):
When a canvas or CanvasRenderingContext2D object is drawn onto itself, the drawing model requires the source to be copied before the image is drawn, so it is possible to copy parts of a canvas or scratch bitmap onto overlapping parts of itself.
另请查看 Drawing Model 了解所涉及的步骤。
关于javascript - 当源 Canvas 和目标 Canvas 相同时,HTML5 Canvas drawImage函数速度很慢?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27154164/