캔버스 원과 라인

Question

http://jsfiddle.net/cs5Sg/

당신이 볼 수 있듯이, 나는 두 개의 원과 한 줄을 만들기 위해 노력하고있어. 첫 번째 cirle u를 클릭하면 선 위치를 수정할 수 있습니다. 질문이 두 개 있습니다.

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.