HTML5 Canvas，我的弧线绘制了一条到中心的起点线

Question

电弧具有以下结果。我是否必须自己计算弧的起点？ jsfiddle链接在这里：jsfiddle link here

canvas = document.getElementById('myCanvas');
context = canvas.getContext('2d');
context.beginPath();
context.strokeStyle = "#FF0000";
context.lineWidth = 1;
//   context.moveTo(49, 49);
context.arc(19, 19, 15, 0, 1 * Math.PI);
context.moveTo(49, 49);
context.arc(49, 49, 15, 0, 1 * Math.PI);

context.stroke();

Answer 1

每次都需要关闭路径：

http://jsfiddle.net/8EDHb/1/

context.beginPath();
context.arc(19, 19, 15, 0, 1 * Math.PI);
context.stroke();
context.closePath();
context.moveTo(49, 49);
context.beginPath();
context.arc(49, 49, 15, 0, 1 * Math.PI);
context.stroke();
context.closePath();

Answer 2

如果你想要一个完整的圆圈，你应该使用if。 对于包含2 * Math.PI和center (cx,cy)的圈子，您可以让javascript计算起始位置。

使用radius r等 如果你有明确的价值观， 例如。中心在100,100和半径50使用

context.arc(cx + r,cy)