在 Canvas 开发中，并没有直接提供“带箭头的贝塞尔曲线”这类现成的 API。要实现曲线端点带有指向性箭头，核心在于：精准计算终点处的切线方向，并据此绘制一个朝向该方向的三角形箭头。这不仅仅是画一个三角形，而是要让箭头与曲线在终点处自然衔接、视觉上保持连贯。
首先，需要明确终点处切线方向如何计算。贝塞尔曲线在任意点的切线方向由其导数决定。对于最常用的三次贝塞尔曲线，终点处的切线方向向量近似等于 终点坐标减去第二个控制点坐标（即 vec = (endX - cp2X, endY - cp2Y)）。这个向量代表了曲线“冲入”终点时的瞬时方向，是箭头朝向的物理依据。同理，二次贝塞尔曲线终点切线方向近似为 (endX - cpX, endY - cpY)。虽然这不是数学上严格的导数值，但在大多数可视化场景中精度已经足够，且计算效率高——这才是实际应用的关键。
获得切线方向向量后，下一步是将其归一化，旋转 ±30° 得到箭头两侧边的方向，再按固定长度（例如 12px）延伸出两个顶点。具体操作步骤如下：
- 设终点为
(ex, ey)，方向向量(dx, dy) - 计算向量长度：
len = Math.sqrt(dx*dx + dy*dy)，若 len ≈ 0 则跳过箭头（两点重合或几乎重合时，带箭头的曲线没有意义） - 归一化：
ux = dx / len，uy = dy / len - 定义箭头长度
arrowLen = 12，张角半角angle = Math.PI / 6（30°） - 左顶点：
lx = ex - arrowLen * Math.cos(Math.atan2(uy, ux) + angle)，ly = ey - arrowLen * Math.sin(Math.atan2(uy, ux) + angle) - 右顶点：
rx = ex - arrowLen * Math.cos(Math.atan2(uy, ux) - angle)，ry = ey - arrowLen * Math.sin(Math.atan2(uy, ux) - angle)
不过，更简洁的工程实现方式是直接使用二维旋转变换公式，避免反复调用 Math.atan2 和三角函数，代码更清爽，性能也更佳。
得到终点 (ex, ey)、左顶点 (lx, ly)、右顶点 (rx, ry) 后，利用 Canvas 路径 API 绘制实心三角形：
ctx.beginPath()ctx.moveTo(ex, ey)（箭头尖）ctx.lineTo(lx, ly)ctx.lineTo(rx, ry)ctx.closePath()ctx.fill()（若需要描边，可使用stroke()）
绘制箭头前请设置好 ctx.fillStyle 或 ctx.strokeStyle，并注意路径状态。建议每次绘制前调用 beginPath()，避免路径污染导致样式混乱。
整个流程应作为一个原子操作：先绘制曲线，然后立即基于同一终点和控制点计算箭头并绘制。避免分多次调用导致坐标系变化或状态污染。以下是几个容易忽略的细节：
- 曲线必须使用
bezierCurveTo()或quadraticCurveTo()显式绘制，起点用moveTo() - 箭头绘制必须紧跟在曲线之后，且不调用
beginPath()中断路径（除非你明确想分离样式） - 若需抗锯齿或高 DPI 支持，记得考虑
devicePixelRatio缩放箭头尺寸——特别是移动端开发，这个小技巧能避免箭头看起来模糊或大小不一致。
