javascript - 画布圆圈和线条

Question

http://jsfiddle.net/cs5Sg/

如您所见，我正在尝试制作两个圆圈和一条线。当您单击第一个圆圈时，您可以修改线条位置。我有两个问题：

1. 如何删除第二行？（只有当我添加第二个圆圈时，第二行才会出现。）
2. 如何在mouseup事件发生后停止“动画”？

Answer 1

您只开始一条路径，因此两个圆圈之间的线，并且start在该语句中始终是正确的if- 您应该将它放在mousemove侦听器中，并且只附加一次。

这将创建一个弧：

context.arc(x,y,radius,0,2*Math.PI);

然后，这会在同一条路径上创建一条弧线，因此从最后一个结束到这个开始会有一条线：

context.arc(x1,y1,radius,0,2*Math.PI);

相反，只需将它们放在单独的路径中：

context.beginPath();
context.arc(x,y,radius,0,2*Math.PI);
context.stroke();

context.beginPath();
context.arc(x1,y1,radius,0,2*Math.PI);

context.moveTo(x,y);
context.lineTo(x1,y1);
context.stroke();

这是更新的 jsFiddle。