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

然后结果如下：

Dashed line with first two dashes using rounded line caps and last dash using butt caps http://phrogz.net/tmp/canvas_broken_rounded_stroke.png

正如您在this test page上看到的那样，在最后一个moveTo之后添加“多余的”lineTo电话会修复最后一个线段以使用圆顶大写。

我准备将此文件作为错误提交，但后来我发现Safari v5，Chrome v8和FireFox v3.6和v4.0b的行为相同。这让我相信这是故意的。

标准中指定了这种行为，并且（如果你能辨别出来）为什么会这样做？

Answer 1

以下是canvas spec (section 9, paths)的相关定义：

moveTo(x, y)方法必须创建一个新的子路径，并将指定的点作为其第一个（也是唯一的）点。

lineTo(x, y)方法...必须使用直线将子路径中的最后一个点连接到给定点（x，y），然后必须将给定点（x，y）添加到子路径

closePath()方法...必须将最后一个子路径标记为已关闭...这相当于添加一条将最后一个点连接回第一个点的直线，从而“关闭”形状...

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

为什么HTML Canvas四舍五入的lineCap会失败？

1 个答案: