html - 如何加入/连接路径的末端？（HTML 画布）

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