html - HTML Canvas - 曲がった矢印を描く

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

二次曲線を使用しているため、矢印の頭の「方向」を指す線を作成する2つの点がわかります。

したがって、少しのトリグを投げると、解決策が得られます。これを行う一般化された関数を次に示します。

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