HTML Canvas - Vẽ mũi tên cong

Question

Tôi đang cố vẽ các mũi tên cong trong canvas html. Tôi không có vấn đề gì để vẽ một đường cong nhưng tôi không biết cách đặt > ở cuối dòng (hướng).

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

Ý tưởng của tôi là lấy một phần nhỏ của dòng ở cuối và vẽ một hình tam giác. Làm cách nào để tôi có được tọa độ của một điểm trong dòng?

Dưới đây là hình ảnh để hiểu rõ hơn.

Answer 1

Vì bạn đang sử dụng một đường cong bậc hai, bạn biết hai điểm mà làm cho một dòng trỏ trong "hướng" của mũi tên đầu của bạn:

Vì vậy, ném xuống một smidge trig và bạn có cho mình một giải pháp. Dưới đây là một chức năng khái quát hóa mà sẽ làm điều đó cho bạn:

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