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()之后，或紧接在{{1}}之前），它需要两个数量级才能完成相同的绘制

为了证明这个问题，我整理了一个jsfiddle：http://jsfiddle.net/V3puL/7/（警告：这可能需要一分多钟才能完成运行！）

我已经在一些最新版本的Chrome和Firefox上尝试了这一点，但结果相同。

我在这里做了一些明显错误的事吗？

Answer 1

当您绘制一条像素厚度的线条时，实施者可以使用Bresenham，或者在这种情况下更可能是由于抗锯齿，Wu's line algorithm。

但是，这些支撑线都不比一个像素厚。

当你需要厚度不同的线条时，需要对其应用更多的数学，例如角度，末端的切线;它需要被填充（如多边形，使用任一扫描线，或者不太可能“桶”填充或复制具有偏移的线，因为这会在许多情况下产生间隙/孔）等。如果线条已连接关节的角度需要根据前一条线的角度以及连接类型等计算。

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

PS：lineWidth只需要在stroke()之前设置，因为这是它实际使用的唯一时间。

添加注意事项虽然在最低级别是这种情况，但浏览器不必实现这些算法本身，因为它们可能使用DirectX等子系统。但是通过浏览器使用这些来观察。

为什么ctx.lineWidth＆gt; 1使批量线画慢？

1 个答案: