用canvas画转弯箭头

以下是使用 canvas 画转弯箭头的示例代码：

<canvas id="arrow" width="200" height="200"></canvas>

const canvas = document.getElementById("arrow");
const ctx = canvas.getContext("2d");

// 设置箭头样式
ctx.strokeStyle = "#000";
ctx.lineWidth = 2;
ctx.lineCap = "round";
ctx.lineJoin = "round";

// 绘制直线
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(150, 100);
ctx.stroke();

// 绘制箭头
ctx.beginPath();
ctx.moveTo(150, 100);
ctx.lineTo(130, 80);
ctx.lineTo(130, 120);
ctx.closePath();
ctx.stroke();

以上代码将在一个 200x200 的 canvas 中绘制一条从左到右的直线，并在直线末尾绘制一个向右的箭头。如果要画向下或向上的箭头，只需要修改箭头的坐标即可。