为什么HTML Canvas四舍五入的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();

然后结果如下:

使用圆形线帽的前两个短划线的虚线和使用对接帽的最后一个短划线http://phrogz.net/tmp/canvas_broken_rounded_stroke.png

正如您在此测试页面上看到的那样,moveTo在最后修改lineTo最后一个线段后添加"多余" 调用以使用圆顶大写.

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

在标准中指定了这种行为,并且(如果你能辨别出来)为什么这样做？

Answer 1

以下是画布规范中的相关定义(第9节,路径):

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

该lineTo(x, y)方法都需要在子路径使用直线给定的点(x,y)的连接最后一个点,然后必须在指定点(X,Y)添加到子路径.

该closePath()方法...必须标记最后作为子路径关闭...这等效于将直线连接最后一点回到第一点,从而"闭合"的形状...

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