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

我的想法是取线段末端的一小部分并绘制一个三角形。 如何获取线段上某点的坐标？

下面是更好理解的图片：

- deep

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

- Simon Sarris

---

我所做的唯一更改是将 http://jsfiddle.net/SguzM/1/ 中的 atan 更改为 atan2，以支持负角度并防止除以零。 - Variant

在此操作后，您应该将画布翻译并旋转回初始状态，以便画布不会使用此函数中设置的方向进行绘制。我在drawArrowhead函数末尾添加了3行代码，请参见此处：http://jsfiddle.net/SguzM/89/ - tozlu

如果你设置sx = 100，sy = 20，ex = 100，ey = 10，那么你会很遗憾地得到一个丑陋的箭头。 - lig

如果有其他人也错过了，箭头“方向”指向的两个点不是曲线上的两个点，而是曲线的控制点和终点。 - Existential Casper