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缩放箭头尺寸
不复杂但容易忽略。
