帆布圈和线

Question

http://jsfiddle.net/cs5Sg/

正如你所看到的，我试图让两个圆一线。当你点击第一个圆圈时，你可以修改行的位置。 我有2个问题：

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.