用CanvasRenderingContext2D画箭头

在HTML5 Canvas API中，`CanvasRenderingContext2D` 提供了一种绘制矢量图形的能力，包括箭头。你可以使用直线和曲线函数来创建箭头形状。下面是一个简单的示例，展示如何使用 `moveTo()`、`lineTo()` 和 `stroke()` 函数来绘制一个基本的箭头：

// 创建 canvas 元素和上下文
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 箭头起点坐标
var start = {x: 50, y: 50};

// 设置线条颜色和宽度
ctx.strokeStyle = 'black';
ctx.lineWidth = 5;

// 首先绘制基础线段
ctx.beginPath();
ctx.moveTo(start.x, start.y);
ctx.lineTo(start.x + 50, start.y); // 箭头主体部分

// 绘制箭头
ctx.save(); // 保存当前状态，用于恢复
ctx.beginPath();
ctx.moveTo(start.x + 40, start.y); // 箭头头部起点
ctx.lineTo(start.x + 60, start.y + 20); // 箭头头部朝向
ctx.lineTo(start.x + 40, start.y); // 返回到箭头头部起点，闭合路径
ctx.stroke();

// 恢复之前的状态
ctx.restore();

// 最后，画出整个箭头
ctx.stroke();

这只是一个基本示例，实际箭头可以根据需要添加更复杂的细节，比如渐变效果或者自定义样式。