javascript - 为什么 ctx.lineWidth > 1 会使批量画线变慢？

Question

当绘制多条线时，在一条路径上一次完成它们似乎是性能上的胜利:

  ctx.beginPath();
  for (var i = 0; i < lines.length; i++) {
    var line = lines[i];
    ctx.moveTo(line[0], line[1]);
    ctx.lineTo(line[2], line[3]);
  }
  ctx.stroke();

我的初步测试表明情况确实如此。对于绘制许多短线，我发现速度提高了约 70%。

但是，当我将 lineWidth 值设置为大于 1 时，(在 ctx.beginPath() 之前、紧接在它之后，或者紧接在 ctx.stroke()) 完成相同的绘图需要两个数量级的时间。

为了演示这个问题，我整理了一个 jsfiddle:http://jsfiddle.net/V3puL/7/ (警告:这可能需要一分多钟才能完成运行!)

我已经在一些最新版本的 Chrome 和 Firefox 上进行了尝试，结果大致相同。

我在这里做错了什么吗？

Answer 1

当您绘制一条粗细为一个像素的线条时，实现者可以使用 Bresenham 或更可能在这种情况下由于抗锯齿，Wu's line algorithm .

但是，这些都不支持超过一个像素的线条。

当您需要粗细不同的线条时，您需要对其应用更多的数学运算，例如它的 Angular 、两端的切线；它需要填充(如多边形，使用扫描线的一种或另一种方式，或者不太可能“桶”填充或具有偏移的线的复制，因为这在许多情况下会产生间隙/孔)等。如果线被连接关节的 Angular 需要根据前一条线的 Angular 以及连接类型等进行计算。

整个过程有点复杂，因此预计这将比一个像素粗线花费更多的时间。

PS:lineWidth 只需在 stroke() 之前设置，因为这是唯一一次实际使用它。

添加注释:虽然这是最低级别的情况，但浏览器没有必要实现这些算法本身，因为它们可能使用子系统，例如 DirectX 等。但通过浏览器对这些的使用可以观察到。