html - 如何加入/连接路径的两端？ (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) 如果你想描边完整的路径，你需要在调用lines之前调用closePath。

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