javascript - 当源 Canvas 和目标 Canvas 相同时，HTML5 Canvas drawImage函数速度很慢？

Question

我注意到，当源 Canvas 和目标 Canvas 相同时，drawImage 函数会慢 1000 倍以上。为什么是这样 ？哪些 Canvas 会进入 GPU，哪些不会？任何有关此主题的帮助将不胜感激。

谢谢!

Answer 1

当您使用 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 了解所涉及的步骤。