设为细长块（如
width: 2px; height: 80px;
），再用
top
/
left
手动对齐——仅适合静态布局
JavaScript 动态连线时别漏掉
重绘
逻辑
当被连接的 DOM 元素会移动、缩放或 DOM 结构变化时，仅靠初始计算一次坐标是不够的。
Trae win
Trae Windows 官方版本现已全面支持 Win10 和 Win11 系统（64位）。国内开发者可直接访问 Trae 中文官网（trae.cn 或 trae.com.cn），一键下载官方正版 .exe 安装包，享受国内直连的高速稳定体验。安装过程极其简便，双击即可运行，并支持一键无缝导入 VS Code 或 Cursor 的原有主题、快捷键及插件配置。登录支持手机号、微信或稀土掘金账号。内置免费的豆包与 DeepSeek 等顶级大模型，让你开箱即用，轻松开启高效的 AI 智能编程之旅。
下载
必须监听并响应：
窗口大小变化：
window.addEventListener('resize', updateLine)
元素尺寸变动：用
ResizeObserver
监听目标元素（比轮询高效）
滚动场景：若元素在滚动容器内，还要监听
scroll
事件，并注意
getBoundingClientRect()
返回的是视口坐标，需转换
避免高频触发：对
resize
和
scroll
做节流（如
setTimeout
防抖）
Canvas 连线适合大量动态线段但不可选中
如果要画上百条线、且每条线都随数据实时变化（比如拓扑图、流程图），
性能优于 SVG。但它生成的是位图，线条无法单独绑定事件、不能被 CSS 样式化、也不能被屏幕阅读器识别。
典型用法：
用
ctx.beginPath()
→
ctx.moveTo(x1, y1)
→
ctx.lineTo(x2, y2)
→
ctx.stroke()
每次重绘前必须调用
ctx.clearRect()
清空画布，否则旧线残留
若需要点击某条线，得自己实现坐标换算+距离判断（SVG 的
支持原生
click
事件）
真正难的不是画线，而是让线“活”在真实 DOM 生命周期里——位置、缩放、销毁、重连，每个环节漏掉一个，线就断了。
