Canvas绘制带箭头的贝塞尔路径端点指向计算

在 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 缩放箭头尺寸——特别是移动端开发，这个小技巧能避免箭头看起来模糊或大小不一致。