轻量化canvas图形渲染架构的关键在于解耦“画什么”与“怎么画”，通过组件抽象、分层渲染、指令流驱动和状态交互分离实现高效可维护渲染。
轻量化Canvas图形渲染架构的关键，在于把“画什么”和“怎么画”解耦，用结构化数据驱动渲染，而不是直接在Canvas上硬编码绘图逻辑。
组件抽象：用对象代替命令式绘图
每个可视元素（如节点、连线、图标）应封装为独立对象，包含位置、尺寸、样式和行为逻辑。例如一个流程图节点可定义为：
- id：唯一标识，用于事件绑定与状态追踪
- type：语义类型（如 "start"、"decision"），影响绘制外观与交互规则
- bounds：{ x, y, width, height }，统一坐标空间管理
- render(ctx)：自身负责调用 ctx.fillRect()、ctx.strokeText() 等，不污染全局上下文
分层渲染：避免全量重绘
将画布划分为逻辑图层（如背景层、主内容层、覆盖层），每层独立缓存与更新：
- 背景层（grid、标尺）变化频率低，可离屏缓存为静态位图
- 主内容层含所有节点与连线，拖拽时仅重绘该层
- 覆盖层（选中框、临时连线、提示气泡）按需绘制，不参与持久状态
这样既减少重复计算，又便于实现局部更新与动画过渡。
指令流驱动：统一渲染入口
不直接调用 ctx 方法，而是生成标准化的渲染指令数组，再由统一调度器执行：
- 指令格式如 { type: 'rect', x: 10, y: 20, w: 80, h: 40, fill: '#3a86ff' }
- 支持嵌套子指令（如带文字的按钮可拆为 rect + text 指令）
- 便于做渲染前过滤（如隐藏图层）、样式批量替换、导出为 SVG 或快照回放
状态与交互分离：让组件可预测
组件自身不持有鼠标坐标或拖拽状态，只响应明确的生命周期方法：
- hitTest(x, y)：返回布尔值，判断是否被点中
- onDragStart(data)：接收初始偏移与上下文，返回新位置约束
- onDraw(ctx)：纯函数式调用，无副作用
交互逻辑由外层控制器统一管理，组件保持无状态、可复用、易测试。
