画布圈和线

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

Here's the updated jsFiddle.