当源和目标画布相同时，HTML5画布drawImage函数会变慢吗？

Question

我注意到当源和目标画布相同时，drawImage函数会慢1000倍。为什么是这样 ？什么画布去GPU，什么不？ 非常感谢您对此主题的任何帮助。

谢谢！

Answer 1

当您使用画布作为源和目标时，浏览器需要执行（涉及更精细的步骤，但这些是主要步骤）：

• 创建一个临时位图以复制到
• 将当前位图复制到临时位图
• 将临时位图复制回不同位置的原始位图（即drawImage（canvas，...））;
• 删除划痕

而不是当你使用单独的画布时：

• 将源位图复制到目标位图

为什么不只是“blitting”？以这种方式 official standard define 这种情况（我的重点）：

  

当canvas或CanvasRenderingContext2D对象绘制到自身时，   绘图模型需要在图像之前复制源   绘制，因此可以复制画布的部分或临时位图   在自身的重叠部分。

另请参阅 Drawing Model 了解相关步骤。