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

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 和三角函数，代码更清爽，性能也更好。

在 Canvas 中绘制箭头三角形

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

不复杂吧？但细节往往藏在不容易注意到的地方。