HTML Canvas - Rysuj zakrzywione strzałki

Question

Próbuję narysować zakrzywione strzałki w kanwie HTML. Nie mam problemu z narysowaniem zakrzywionej linii, ale nie wiem, jak umieścić > na końcu linii (kierunek).

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(); 

Mój pomysł polega na pobraniu niewielkiej części linii na końcu i narysowaniu trójkąta. Jak mogę uzyskać współrzędne punktu w linii?

Poniżej znajduje się zdjęcie w celu lepszego zrozumienia.

Answer 1

Ponieważ używasz kwadratowej krzywej wiesz, dwa punkty, które sprawiają, linię, która wskazuje na „kierunek” swojej strzałką:

więc rzucać smidge of trig i masz rozwiązanie. Oto uogólniona funkcja, która zrobi to za ciebie:

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)); 
}