我想使用 canvas 标签，javascript 绘制一个箭头。我已经使用二次函数实现了它，但是我在计算箭头的旋转 Angular 时遇到了问题...
有人知道这件事吗？
谢谢
最佳答案
尽可能简单。您必须自己添加 context.beginPath() 和附加 context.stroke() :
ctx = document.getElementById("c").getContext("2d");
ctx.beginPath();
canvas_arrow(ctx, 10, 30, 200, 150);
canvas_arrow(ctx, 100, 200, 400, 50);
canvas_arrow(ctx, 200, 30, 10, 150);
canvas_arrow(ctx, 400, 200, 100, 50);
ctx.stroke();
function canvas_arrow(context, fromx, fromy, tox, toy) {
var headlen = 10; // length of head in pixels
var dx = tox - fromx;
var dy = toy - fromy;
var angle = Math.atan2(dy, dx);
context.moveTo(fromx, fromy);
context.lineTo(tox, toy);
context.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
context.moveTo(tox, toy);
context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
}<html>
<body>
<canvas id="c" width="500" height="500"></canvas>
</body>关于javascript - 在 Canvas 标签上绘制箭头，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/808826/