HTML 캔버스 - 곡선 화살표 그리기

Question

HTML 캔버스에 곡선 화살표를 그리려는 중입니다. 나는 곡선을 그리는 데 아무런 문제가 없지만 라인 끝에 (방향) >을 넣는 방법을 모르겠습니다.

ctx.beginPath(); 
    ctx.fillStyle = "rgba(55, 217, 56,"+ opacity +")"; 
    ctx.moveTo(this.fromX,this.fromY); 
    ctx.quadraticCurveTo(this.controlX, this.controlY, this.toX, this.toY); 
ctx.stroke(); 

제 아이디어는 끝 부분에서 줄의 작은 부분을 차지하고 삼각형을 그립니다. 선의 점 좌표는 어떻게 얻을 수 있습니까?

다음은 더 나은 이해를 돕기위한 이미지입니다. 그래서 아래로 던져

: 당신이 차 곡선을 사용하고 있기 때문에

Answer 1

, 당신은 당신의 화살표 머리의 "방향"을 가리키는 라인을 두 점을 알고있다 trig의 무언가 그리고 당신은 해결책이 있습니다. 여기 당신을 위해 그것을 할 것 일반화 된 함수의 :

http://jsfiddle.net/SguzM/

function drawArrowhead(locx, locy, angle, sizex, sizey) { 
    var hx = sizex/2; 
    var hy = sizey/2; 

    ctx.translate((locx), (locy)); 
    ctx.rotate(angle); 
    ctx.translate(-hx,-hy); 

    ctx.beginPath(); 
    ctx.moveTo(0,0); 
    ctx.lineTo(0,1*sizey);  
    ctx.lineTo(1*sizex,1*hy); 
    ctx.closePath(); 
    ctx.fill(); 

    ctx.translate(hx,hy); 
    ctx.rotate(-angle); 
    ctx.translate(-locx,-locy); 
}   

// returns radians 
function findAngle(sx, sy, ex, ey) { 
    // make sx and sy at the zero point 
    return Math.atan2((ey - sy), (ex - sx)); 
}