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

Canvas不支持原生带箭头贝塞尔曲线，需先计算终点切线方向向量（三次曲线为(endX-cp2X, endY-cp2Y)），单位化后旋转±30°得箭头两顶点，再以终点和两顶点绘制实心三角形。

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 缩放箭头尺寸

不复杂但容易忽略。