HTML5和javascript：在线条上绘制箭头

我有一个项目，其中包括一些动画流程图，它广泛使用箭头来指示流程。我创建了一个函数，它将绘制一条线并用箭头将其覆盖：线从端点向上延伸一半宽度，然后向右和向下延伸线的全宽，然后向下和向左镜像箭头的顶部，最后返回到原始线的末端

我做了一个实验来证明这一点

正如您所看到的，它工作正常，但只有当线路完全水平并且从左到右运行时。因为会有任何方向的线，我需要能够设置箭头指向与线的角度相同的方向，箭头的背面垂直于该角度。有人知道怎么做吗

这是我正在使用的代码：

function drawLine(xStart, yStart, xEnd, yEnd, strokeColour, strokeWidth) {
var r = document.getElementById('theCanvas');
r = r.getContext('2d');
r.beginPath();
r.strokeStyle = strokeColour;
r.lineWidth = strokeWidth;
r.moveTo(xStart, yStart);
r.lineTo(xEnd, yEnd);
r.lineTo(xEnd, yEnd - (strokeWidth / 2));
r.lineTo(xEnd + strokeWidth, yEnd);
r.lineTo(xEnd, yEnd + (strokeWidth / 2));
r.lineTo(xEnd, yEnd);
r.stroke();
}

drawLine(100, 100, 400, 100, '#000', 20);

---

就像@JamesThorpe说的，用数学

一些伪代码：

dY = yEnd - yStart;
dX = xEnd - xEnd;
angle = atan2(dY / dX) * 180 / PI; // angle, in degrees, from horizontal

然后，将箭头放置在直线的端点处，并使用从上述计算中获得的角度旋转箭头。可能需要一些调整才能使原点正确

我还不熟悉canvas的使用，所以可能会对这一部分有所帮助

---

这是假设你总是有一条直线，从a点到B点。

我肯定有人会给出完整的答案，但本质上是数学！您需要根据直线的角度，使用至少一个trig函数sin，cos，tanLike@chazsolo说，将箭头的点定义为到直线末端的偏移量，并添加canvas命令：