为什么执行具有完全相同参数的Canvas.getContext（＆＃39; 2d＆＃39;）。arc方法会产生不同的结果

Question

我执行以下代码：

context.arc(100,50,50,2,3);
context.stroke();
context.arc(100,50,50,2,3);
context.stroke();

为什么结果是弧线和闭合线而不是一条弧线，实际上两条相同的弧线以相同的方式绘制？

函数的参数是它的中心坐标，半径和角度。 根据相同的执行情况，我的理解应该给出相同的结果。

提前致谢

Answer 1

这是因为路径上实际上有三个段。

第一个弧绘制如下的子路径：

然后路径光标移回到开始，因为它与第一个弧具有相同的位置，并且在此过程中它将创建一条线，因为所有路径当前都已连接：

为避免这种情况，您可以通过使用moveTo()创建一个新路径来分解子路径，并将光标移动到下一个弧将开始的位置，或者只是清除当前路径并启动一个新路径：

实施例

var context = c.getContext("2d");
context.arc(100,50,50,2,3);
context.stroke();
context.beginPath();
context.arc(100,50,50,2,3);
context.stroke();

<canvas id=c></canvas>

要使用moveTo()，您必须使用以下方法计算角度：

centerX + cos(angle) x radius
centerY + sin(angle) x radius

实施例

var context = c.getContext("2d");
context.arc(100,50,50,2,3);
context.stroke();
context.moveTo(100 + Math.cos(2) * 50, 50 + Math.sin(2) * 50);
context.arc(100,50,50,2,3);
context.stroke();

<canvas id=c></canvas>