html - 为什么 HTML Canvas rounded lineCap 对于最后一段失败？

Question

使用 HTML Canvas，如果你画一条虚线是这样的:

ctx.lineWidth   = 40;
ctx.lineCap     = 'round';
ctx.strokeStyle = 'red';

ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(150,200);
ctx.moveTo(200,300);
ctx.lineTo(250,400);
ctx.moveTo(300,500);
ctx.lineTo(350,600);
ctx.closePath();
ctx.stroke();

那么结果是这样的:

_{(来源:phrogz.net)}

正如您在 this test page 上看到的那样, 在最后一个 lineTo 修复最后一个线段以使用圆角大写字母后添加一个“多余的” moveTo 调用。

我准备将此作为错误记录，但后来我发现该行为在 Safari v5、Chrome v8 以及 FireFox v3.6 和 v4.0b 上是相同的。这让我相信这是故意的。

此行为在标准中的何处指定，以及(如果您能辨别)为什么这样指定？

Answer 1

这里是来自 canvas spec (section 9, paths) 的相关定义:

The moveTo(x, y) method must create a new subpath with the specified point as its first (and only) point.

The lineTo(x, y) method ... must connect the last point in the subpath to the given point (x, y) using a straight line, and must then add the given point (x, y) to the subpath.

The closePath() method ... must mark the last subpath as closed ... this is equivalent to adding a straight line connecting the last point back to the first point, thus "closing" the shape ...

每个 moveTo 调用都会创建一个新的子路径，从而结束前一个子路径。在您的情况下，前两个部分以这种方式结束。对于最后一段，调用 closePath 通过在相反方向绘制另一段来“关闭”该段，因此您看到的结果是——没有一个段，而是两个重叠的段。添加另一个 moveTo 会像其他部分一样结束此段，因此您会看到预期的圆角线帽。