背景层与交互层分离本质是将静态与动态内容分画布独立更新，避免整帧重绘；需用多个绝对定位canvas叠层，背景层初始化后几乎不动，交互层仅响应操作局部刷新，并设pointer-events: none以防事件拦截。
背景层与交互层分离，本质是把“不变的”和“总在变的”画在不同的画布上，各自独立更新，互不干扰。这样做能显著减少每帧重绘量，避免拖拽、悬停时整个画面闪烁或卡顿。
为什么必须分开？
Canvas本身没有图层概念，所有内容都在一个位图上绘制。如果背景网格+节点+选中框全挤在一个canvas里，哪怕只拖动一个节点，也要清空整块画布、重绘全部元素——包括那些根本没动的网格线。CPU白白浪费在重复绘制上。
分离后，背景层初始化画一次就几乎不动；交互层（选中框、拖拽预览、连接线高亮）只在用户操作时局部更新，其他时间完全静默。
怎么搭结构？
用多个<canvas>元素叠在一起，靠CSS定位对齐：
- 外层容器设
position: relative，统一控制尺寸 - 每个canvas设
position: absolute; top: 0; left: 0;，确保像素级重合 - 按z-index从低到高排：背景层 → 节点层 → 连接线层 → 交互层
- 推荐命名清晰，比如
canvas-bg、canvas-obj、canvas-ui
各层该画什么？
背景层：网格线、坐标轴、底色、水印、参考线。只需在缩放/平移时重绘，平时完全不动。
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
交互层：鼠标悬停高亮边框、节点选中虚线、拖拽时的半透明预览、连接线临时锚点。这些元素生命周期短、变化频繁，且不需要参与节点内部渲染逻辑。
注意：交互层 canvas 的尺寸要与视口严格一致，不要留白或溢出，否则会影响事件坐标计算和渲染精度。
关键细节别漏掉
交互层必须启用pointer-events: none（默认即可），否则会拦截鼠标事件，导致底层节点无法响应点击或拖拽。
背景层 canvas 可以提前用ctx.imageSmoothingEnabled = false关闭抗锯齿，让网格更锐利；交互层则建议保持开启，保证虚线和预览效果柔和。
当交互结束（比如松开鼠标），交互层可直接ctx.clearRect(0, 0, width, height)清空，无需保存状态或回滚——它本就不该有持久内容。
