canvas交互式图形系统的核心是将画布作为“组件容器”，通过path2d封装矢量图形、组合式api实现响应式绘图、跨平台适配及语义化props设计，使开发者专注“画什么”。
Canvas交互式图形系统的核心，不是把画布当画板用，而是把它当“组件容器”来设计。关键在于把图形逻辑、状态响应、事件处理和生命周期管理打包成可配置、可组合、可复用的单元，而不是每次都在mounted里手写ctx.lineTo()。
用Path2D封装矢量图形，实现一次定义、多处复用
复杂图形（如图标、UI装饰元素、业务符号）不应在绘制时重复写路径命令。Path2D对象天然支持复用：
- 用构造函数动态生成路径（适合带参数的图形，比如不同尺寸的气泡框）
- 用SVG字符串初始化（适合设计师交付的d值，语义清晰、易维护）
- 封装为独立模块导出，例如export const iconArrow = new Path2D('M10 20 L30 20 L20 10 Z')
- 在任意canvas上下文中调用ctx.fill(iconArrow)或ctx.stroke(iconArrow)，无需关心坐标系绑定
- 配合ctx.save()/ctx.restore()做局部变换，避免全局污染
基于组合式API构建响应式绘图组件（Vue 3）
把Canvas从命令式操作升级为声明式控制，重点在三个层面解耦：
- 状态驱动绘制：将图形参数（如坐标、颜色、是否高亮）作为ref或computed，自动触发重绘
- 生命周期托管：在onMounted中获取ctx，在onUnmounted中清除定时器、移除事件监听、释放资源
- 类型即契约：用TypeScript定义绘图函数签名，例如type DrawFn = (ctx: CanvasRenderingContext2D, data: ChartData) => void，让IDE能提示、编译能校验
- 暴露redraw方法供父组件主动触发，同时支持watch数据变化自动刷新
跨平台与自定义组件适配的关键点
Canvas在不同环境行为不一致，封装时必须隔离差异：
- 小程序自定义组件：不能直接传this给wx.createCanvasContext，需通过selectComponent或页面实例桥接上下文
- uni-app双端：h5用HTMLCanvasElement，App端用uni.createCanvasContext，通过平台判断+适配层统一接口
- 性能敏感场景（如签名、实时图表）：启用离屏Canvas做预渲染；节流touchmove事件；只重绘脏区域而非全量clearRect
- 所有平台统一使用devicePixelRatio修正画布像素密度，避免模糊或缩放失真
面向业务的组件接口设计原则
一个好用的绘图组件，应该让使用者专注“画什么”，而不是“怎么画”：
- props按语义分组：如geometry（宽高、坐标）、style（颜色、线宽、字体）、interaction（是否可拖拽、是否响应点击）
- 提供默认合理值，并用validator约束取值范围（如codeLength: v => v >= 4 && v ）
- emit标准事件：draw-start、draw-end、hit-test（命中检测结果），便于上层联动
- 支持slot注入自定义控件（如工具栏、图例），保持核心绘图逻辑纯净
