performance - 画布弧（）与drawImage（）

Question

这可能看起来无害，但是当以每秒 30 帧的速度执行 1000 多次时，它确实加起来了。我绘制了 3 种大小的圆圈，每个圆圈都有自己的填充颜色 (RGBA)。我将它们绘制为图像一次，并drawImage()与数据 URL 一起使用，还是为arc()它们中的每一个都做更快？

额外的信息：

• 为所有圈子使用单个画布
• 上下文和画布被缓存

• 目前完全呼吁弧看起来像

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

Answer 1

根据我的测试，drawImage()在大多数情况下会比使用arc().

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

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

Answer 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 只快一点。

我使用的测试在这里。