canvas路径叠加是通过按序绘制多层路径实现拓扑图层次表达，需统一坐标源、动态绑定节点位置、离屏缓存图标文字，并适配缩放平移的绘制策略。
Canvas 路径叠加本身不是一种独立技术，而是指在同一个 Canvas 上按顺序绘制多个图形路径（beginPath() → 绘制 → stroke()/fill()），通过绘制次序、透明度、混合模式或分层逻辑来构建具有层次感和逻辑关系的拓扑图。实现网页版拓扑关系网布局，关键在于“路径如何组织”+“节点与连线如何协同更新”，而非单纯堆叠。
用路径叠加表达拓扑层级关系
拓扑图中常需区分设备类型（如核心交换机、接入层、终端）、状态（正常/告警/离线）、流向（单向/双向）等。路径叠加可自然承载这些语义：
- 先画背景连接线（灰色、细线、
globalAlpha = 0.6），表示基础物理链路 - 再叠加上层流向箭头（蓝色实线+三角形
path，globalAlpha = 1），表示当前数据流向 - 最后绘制节点外框+图标+高亮边框（如红色描边表示故障），确保视觉焦点落在节点上
- 所有路径使用同一坐标系，避免因多次
save()/restore()或transform导致坐标错乱
动态连线必须基于统一坐标源
路径叠加容易掩盖“坐标不同步”问题。比如拖拽节点后，若连线仍用旧坐标绘制，就会出现“线悬空”现象。正确做法是：
- 每个节点对象保存
{x, y, width, height}，所有路径绘制都读取该数据 - 连线路径（
moveTo(x1,y1); lineTo(x2,y2)）两端点严格绑定节点中心或端口锚点（如x1 = nodeA.x + nodeA.width/2） - 鼠标拖拽时只更新节点对象的
x/y，重绘时自动调用新坐标——不缓存路径，不预生成Path2D对象（除非静态图且节点数极多） - 避免在
mousemove中反复调用canvas.getBoundingClientRect()计算偏移；容器偏移量只需在初始化或 resize 时计算一次并缓存
性能敏感处：少用 fillText，善用离屏 canvas 缓存图标
Canvas 渲染文本（fillText）性能远低于图形绘制，尤其在缩放、拖拽高频场景下极易卡顿。拓扑图中节点标签、状态文字、端口编号都属此类：
- 非交互态下（如仅查看），用离屏 canvas 预渲染常用图标+文字组合（如“SW-01 ?”），作为
ImageBitmap或canvas引用直接drawImage() - 交互态（如悬停高亮、编辑中）才启用实时文本绘制，并限制同时显示的标签数量（例如只显示鼠标附近的3个）
- 禁用不必要的抗锯齿：
ctx.imageSmoothingEnabled = false（对像素级图标更清晰） - 状态色块（如红/黄/绿圆点）一律用
fillRect或arc绘制，不用图片
支持缩放和平移的路径绘制要点
拓扑图常需缩放查看局部、拖动画布浏览全图。路径叠加必须适配视图变换：
- 不要在绘制路径前用
ctx.scale(sx, sy)和ctx.translate(tx, ty)全局变换——会导致lineWidth、文字大小、阴影失真 - 正确方式：保持 canvas 像素尺寸固定（如 1600×900），所有节点坐标按逻辑单位（如 1 单位 = 10px）存储；缩放时仅调整绘制参数：
ctx.lineWidth = baseWidth / scale，ctx.font = (14 / scale) + 'px sans-serif' - 连线箭头需随缩放重绘三角形路径（不能用 CSS
border或 SVG<marker></marker>），推荐用rotate()+moveTo(0,0); lineTo(8, -3); lineTo(8, 3)方式动态生成 - 使用
requestAnimationFrame控制重绘节奏，避免连续拖拽触发上百次无意义绘制
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
