항상 고정 점까지 열리는 호를 만드는 방법

Question

캔버스에 해바라기 효과 호를 만들려고합니다. 호가 있고 내 기하학 기술은 녹슬니다. 시작하려면

, 나는 원산지 (X1, Y1)가 그럼 나는 마우스 위치 헌병 (내지 Xm, 내지 Ym)

지금 경우 얻을 만들 캔버스의 중앙에 어딘가에 원점을 만든 원산지 헌병에, 다음 헌병가와 호를 정의 할 원산지의 방향에 새로운 작은 원점으로 호를 양분하는 지점이어야에서 나는 가상의 선을 정적 반경 (sa y 20). 3 점 오리진, Mp 및 더 작은 반경은 직선을 형성해야합니다.

원점에서 얼마나 가까운 거리에 있는지에 관계없이 고정 반경 (예 : 20)으로 원호의 중심을 잘라야합니다.

그래서 시계를 상상해보십시오. 손이 연결되는 가운데 부분이 인 경우입니다. 마우스가 3시 위치에있을 경우

• 는 아크 마우스가 9시 위치에있을 경우이 ")는"
• 는 아크가 "("는
• 처럼 보이는 것 같습니다 마우스가 12시 위치에 있으면 아크는 "90 ° 회전 된 경우"("와 같습니다.
• 마우스가 6시 위치에 있으면 아크는" 270 ° 회전
• 등 ...

그리고 마우스가 그 호의 위에 있습니다.

내 질문에, 특히 포인트, 또는 mouseevents 또는 기타를 얻는 방법은별로 없지만 {X1, Y1} 및 {Xm, Ym}이 (가) 있다고 가정하면 다음과 같이 호를 만드는 데 필요한 수학은 무엇입니까? 전술 한 바와?

또는 JS/jQuery 전문가의 경우 arc() 매개 변수는?

편집 : 매우 가난한 포토샵

렌더링은 오른쪽 아래 하나는 마우스가 마우스 포인터가 아크/곡선을 그리는 시간에 어디 일반적으로 보여 추가했다.