Canvas图形分组管理旨在解决更新混乱、绘制冗余和逻辑耦合问题，通过语义聚类、结构化封装、分层更新、多Canvas渲染及嵌套子组继承实现高效渲染。
Canvas复杂组合图形渲染中，图形分组管理不是为了“看起来整齐”，而是解决更新混乱、绘制冗余和逻辑耦合这三类实际问题。核心思路是把语义相关、行为一致、更新频率相近的图形聚合成独立单元，用数组或对象封装，再统一调度。
用对象数组封装每组图形
避免为每个图形单独声明变量（如rect1X、rect2Color），全部收归为结构化对象数组。每组对应一个职责明确的数组：
- 节点组：含x、y、width、height、label、isDragging等属性，用于可拖拽UI元素
- 连接线组：含fromId、toId、points（贝塞尔控制点）、isHovered，负责动态连线渲染
- 标注组：含text、anchorX、anchorY、offsetX、offsetY，用于浮动提示或数据标签
初始化时批量生成，例如：nodes = Array.from({length: 50}, () => ({x: Math.random()*800, y: Math.random()*400, label: 'Node'}))。
按组分离更新与绘制逻辑
每组图形的生命周期行为不同，不能混在一个大循环里处理：
- 节点组需响应鼠标拖拽，update()要检查isDragging并更新坐标；绘制时调用drawNode(ctx, node)
- 连接线组不主动移动，但依赖节点位置实时重算路径，update()只做坐标映射，draw()用bezierCurveTo或折线绘制
- 标注组通常只在悬停时显示，update()判断是否靠近鼠标，draw()仅对isVisible === true的对象执行
主循环中顺序调用：updateNodes(); updateConnections(); updateLabels(); drawNodes(); drawConnections(); drawLabels();
结合多Canvas分层提升渲染效率
分组不仅是逻辑划分，更是物理渲染层的依据。将不同组挂载到独立Canvas上，可避免整屏重绘：
- 背景与网格 → bgCanvas（极低频更新）
- 节点与标注 → uiCanvas（中频，拖拽时局部重绘）
- 连接线 → linkCanvas（中频，仅重绘变动连线）
- 临时交互效果（选框、拖拽预览）→ overlayCanvas（高频，帧间清空）
各Canvas绝对定位叠放，CSS设pointer-events: none除交互层外，确保事件穿透到最底层。
支持嵌套子组与状态继承
当图形存在父子关系（如一个容器节点内含多个子图标），可用嵌套结构表达层级：
- 父节点对象含children: []数组，子图形坐标以父节点为相对原点
- 父节点缩放/旋转时，批量更新子图形的transform矩阵，而非逐个计算绝对坐标
- 绘制时先ctx.save() + ctx.transform()应用父变换，再遍历子组绘制，最后ctx.restore()
这样既保持视觉一致性，又避免重复计算，也便于实现展开/折叠、显示/隐藏等批量操作。
