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

标签 javascript html canvas html5-canvas drawimage

我注意到,当源 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/

相关文章:

javascript - canvas drawImage 第一次不绘制图像

javascript - 如何使用 jquery 删除 HTML TABLE 中的最后一列?

html - 使用 spacy 和 html 突出显示动词短语

javascript - 两列网格,带有平面混合元素列表

javascript - 循环遍历坐标数组以在 html Canvas 上绘制线条

android - 如何更改 lightingColorFilter 实例的颜色倍增器

javascript - 使用javascript向表中添加新行

javascript - Wicket:提交表单时运行 JavaScript

javascript - 如何在一次请求中按范围获取数据?

html - 使导航div扩展页面的整个高度