如何加入/连接路径的末尾？ （HTML Canvas）

Question

我有一个包含两个弧的路径，第一个弧被创建，当第二个弧被创建时，它们会自动连接/连接，因为它们包含在同一个路径中，但它们只在一端连接，在其他什么都没有，我怎么告诉它加入另一端呢？

可以在这里找到工作示例（虽然它实际上包含4个弧，但每个路径有2个）：http://jsfiddle.net/QjLT2/

var ctx = document.getElementById("display").getContext('2d');

ctx.beginPath();
ctx.arc(100, 100, 20, Math.PI/2, 0.0, true);
ctx.arc(100, 100, 50, 0.2, Math.PI/2, false);
//ctx.lineTo(100, 100+17);

ctx.strokeStyle = 'blue';
ctx.lineWidth = 5;
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.arc(200, 200, 20, Math.PI/1.5, 0.0, true);
ctx.arc(200, 200, 50, 0.0, Math.PI/1.5, false);
//ctx.lineTo(200, 200+17);

ctx.strokeStyle = 'blue';
ctx.lineWidth = 5;
ctx.stroke();
ctx.closePath();
​

Answer 1

见这里：http://jsfiddle.net/QjLT2/6/

1）您不需要多次设置strokeStyle或lineWidth，除非您实际更改了值。这样做实际上会降低性能，因为上下文具有跟踪的“状态”概念。

2）如果您想要完成路径，则需要在调用closePath之前调用stroke。

var ctx = document.getElementById("display").getContext('2d');

ctx.strokeStyle = 'blue';
ctx.lineWidth = 5;

ctx.beginPath();
ctx.arc(100, 100, 20, Math.PI/2, 0.0, true);
ctx.arc(100, 100, 50, 0.0, Math.PI/2, false);
ctx.closePath();

ctx.stroke();

ctx.beginPath();
ctx.arc(200, 200, 20, Math.PI/1.5, 0.0, true);
ctx.arc(200, 200, 50, 0.0, Math.PI/1.5, false);
ctx.closePath();

ctx.stroke();​