HTML画布-绘制曲线箭头

我试图在html画布中绘制曲线箭头。我画一条曲线没有问题，但我不知道如何将

放在线的末端（方向）

我的想法是在末端画一小部分直线，然后画一个三角形。 如何获得直线上点的坐标

下面是更好理解的图片

---

由于您使用的是二次曲线，您知道两个点构成一条指向箭头“方向”的直线：

因此，扔下一点三角，你有自己的解决方案。下面是一个通用函数，它将为您提供：

---

+1，我在这里所做的唯一更改是：将

atan

的使用更改为

atan2

，以支持负角度并防止被零除。在此操作后，您应该将画布平移并旋转回初始状态，以便画布不会以此函数中设置的方向绘制。我在drawArrowhead函数的末尾添加了3条线，请参见：如果设置sx=100、sy=20、ex=100、ey=10，则会得到外观难看的箭头。如果其他人也错过了它，指向箭头“方向”的两点不是曲线上的两点，而是控制点和曲线的端点。

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

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