画布弧（）与drawImage（）答案

【问题标题】：Canvas arc() vs drawImage()画布弧（）与drawImage（）
【发布时间】：2012-08-28 13:52:04
【问题描述】：

这似乎无害，但当以每秒 30 帧的速度执行 1000 多次时，它确实加起来了。我绘制了 3 种大小的圆圈，每个圆圈都有自己的填充颜色 (RGBA)。将它们绘制为图像一次，然后将 drawImage() 与数据 URL 一起使用，或者为每个 URL 执行 arc() 对我来说更快吗？

额外信息：

为所有圈子使用一个画布
上下文和画布被缓存
目前完全调用 arc 看起来像

this.scene.context.arc(newLocation, this.y+=this.speed/80, this.distance / 2, 0, Math.PI*2, false);

【问题讨论】：

如果你已经有你的代码，你可以在jsperf查看哪个版本更快
如果您最终使用 arc() 方法，您可以优化该行。例如，如果在函数中，将上下文设置为局部变量，或者只是作为变量，这样“this”和“scene”就不必同时查找并进行一次计算。例如 var TWOPI = Math.PI * 2

标签： performance html5-canvas

【解决方案1】：

根据my tests，drawImage() 在大多数情况下会比使用arc() 快得多。

drawImage() 函数可以使用 <img> 或 <canvas> 元素作为其参数，在 Firefox 中，使用 <img> 标记更快，尽管其他浏览器显示相反。

归结为：即使是简单的形状，也可以使用drawImage()

【讨论】：

【解决方案2】：

drawImage() 更快，但仅限于 Firefox。

有一个技巧可以在 Chrome 中提供与 drawImage() 在 Firefox 中相同的性能：

const drawCircle = function(ctx, x, y, radius) {
  ctx.lineWidth = radius * 2;
  ctx.lineCap = 'round';
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x, y);
  ctx.stroke();
}

在 Chrome 84 中，这种使用圆线帽的方法比其他方法快 3 倍左右：

有趣的是，Firefox 79 正好相反：这个技巧被证明是最慢的选项，而 arc 只快一点。

我使用的测试是here。

【讨论】：