Canvas绘制虚线箭头需分两步：先截断虚线路径（终点回退箭头长度），再独立计算角度并填充动态旋转的箭头三角形，避免重叠与错位。
Canvas 本身不提供“虚线箭头”原生方法，必须手动拆解为两部分：**路径主体用虚线绘制，箭头端点单独计算并填充**。关键不是把箭头画在虚线上，而是让虚线止于箭头根部，再独立绘制箭头形状——否则虚线会穿过箭头或错位。
虚线路径要提前截断
虚线不能直接画到终点，否则箭头会叠在虚线末端上，视觉混乱。正确做法是：把整条线段（起点→终点）长度算出，减去箭头长度（比如12px），得到虚线实际终点坐标。
- 用 Math.hypot(dx, dy) 算总长 L
- 计算单位方向向量：ux = dx / L, uy = dy / L
- 虚线终点 = [endX - ux * headlen, endY - uy * headlen]
- 调用 setLineDash([5, 5]) 后，只从起点画到这个截断点
箭头端点需独立定位与旋转
箭头不是固定朝向的三角形，必须根据线段角度动态旋转。最稳妥的方式是：以终点为原点，用 atan2(dy, dx) 得主轴角度，再基于该角度计算左右翼顶点。
- 设箭头张角为 θ（如 30°），斜边长为 headlen（如 10px）
- 左翼角度 = 主轴角 + θ × π/180；右翼角度 = 主轴角 − θ × π/180
- 左翼点 = [endX + cos(左角) * headlen, endY + sin(左角) * headlen]
- 右翼点同理；三点（左翼、终点、右翼）构成填充三角形
避免虚线与箭头重叠的常见错误
很多人把虚线画满全程，再在终点盖一个箭头——这会导致描边重叠、锯齿明显、颜色加深。更隐蔽的问题是：当虚线节奏不匹配箭头尺寸时，最后一段实线可能刚好卡在箭头中间，破坏指向感。
- 不要复用同一 beginPath() 绘制虚线和箭头；应分两次调用
- 箭头建议用 fill()（实心）而非 stroke()（描边），更清晰
- 若需描边箭头，先 save() → 设置 lineWidth/strokeStyle → restore() 隔离样式
- lineDashOffset 动画时，确保偏移只作用于虚线路径，不影响箭头
进阶：带引导感的动态虚线箭头
真正有引导效果的虚线箭头，不只是静态图形，而是让“虚线流动+箭头锚定”协同工作：虚线图案向终点移动，同时箭头保持静止并高亮。
- 用 requestAnimationFrame 每帧更新 lineDashOffset（递减）
- 虚线总周期 = dashArray.reduce((a,b)=>a+b)，偏移值对该周期取模防跳变
- 可在箭头尖端叠加一个微小光点（arc 绘制），颜色略亮、大小 3px，强化视觉焦点
- 分段路径（如折线）需逐段计算截断点和箭头角度，不可全局统一处理
