HTML Kanvas - Eğri okları çiz

Question

Bir html kanvasında eğri oklar çizmeye çalışıyorum. Eğri çizgi çizmek için hiç problemim yok ama > hattının sonuna (yön) nasıl ekleyeceğimi bilmiyorum.

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

Fikrim sonunda çizginin küçük bir bölümünü alıyor ve bir üçgen çiziyor. Satırdaki bir noktanın koordinatını nasıl alabilirim?

Aşağıda daha iyi anlaşılması için görüntü verilmiştir. Yani aşağı atmak

: Bir kuadratik eğrisi kullandığınız yana

Answer 1

, size ok başının "yönünde" işaret eden bir çizgi oluşturan iki puan biliyorum trig bir smidge ve kendine bir çözüm var. İşte sizin için yapacağım bir genelleştirilmiş fonksiyon var:

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