Javascript 为什么ctx.lineWidth>；1.让分批划线变慢？

当绘制多条线时，在一条路径上同时绘制所有线似乎是一种性能胜利：

  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();

ctx.beginPath（）；
对于（变量i=0；i

我的初步测试表明情况确实如此。由于画了许多短线，我看到速度提高了约70%

但是，当我将线宽值设置为大于1时，（在

ctx.beginPath（）

之前、紧跟其后或紧跟

ctx.stroke（）

之前），执行相同的绘图需要两个数量级的时间

为了演示这个问题，我编写了一个JSFIDLE：（警告：这可能需要一分钟以上的时间才能完成运行！）

我已经在一些最新版本的Chrome和Firefox上试用过了，结果都是一样的

---

我在这里明显做错了什么吗？

当你画一条一像素厚的线时，实现者可以使用Bresenham，或者在这种情况下，由于抗锯齿，更可能使用Bresenham

但是，这些都不支持比一个像素厚的线

当你需要不同厚度的线时，你需要对它应用更多的数学知识，比如它的角度，末端的切线；它需要填充（如多边形，以某种方式使用扫描线，或不太可能的“桶”填充或偏移线的复制，因为这在许多情况下会产生间隙/孔）等。如果线连接，则需要根据前一条线的角度以及连接类型等计算连接角度

整个过程有点复杂，所以预计这将比一个像素厚的线需要更多的时间

注：

lineWidth

只需在

stroke（）之前设置，因为这是唯一一次实际使用它

补充说明：虽然在最低级别上是这样，但浏览器不需要自行实现这些算法，因为它们可能使用子系统，如DirectX等，但通过浏览器使用这些子系统可以观察到