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

由於您使用的是二次曲線，你知道兩點，使的是，在你的箭頭的「方向」指向一個行：

於是扔下一觸即發，你有自己的解決方案。這裏是一個廣義函數會爲你做它：

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