帆布圈和線

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.