Canvas开发需遵循工程化规范：HTML中显式声明宽高属性，初始化校验上下文并支持无障碍；绘制时用save/restore隔离状态，禁用全局ctx复用；交互坐标须经devicePixelRatio和getBoundingClientRect校准；动画用requestAnimationFrame，静态内容预渲染至离屏canvas，资源加载完成再绘制，销毁时清理监听器和句柄。
Canvas交互式应用开发不是“写完能动就行”，而是需要一套兼顾可维护性、性能和用户体验的开发规范。它不单是画几条线、响应几个鼠标事件，而是一整套从结构设计、状态管理到渲染策略的工程化实践。
HTML结构与Canvas初始化规范
Canvas元素必须显式声明宽高属性（单位为纯数字，不能带px），且该尺寸决定绘图坐标系的实际像素范围；CSS设置的宽高仅缩放显示，不改变绘图分辨率——这是多数模糊、锯齿、坐标偏移问题的根源。
- 在
<canvas>标签中直接写width="800" height="600"，而非仅靠style="width:100%;height:600px" - 初始化时检查
canvas.getContext('2d')是否返回有效对象，避免静默失败 - 为Canvas添加
tabindex="0"并绑定keydown等键盘事件，支持无障碍操作 - 用
aria-label描述画布用途，例如aria-label="手绘白板，支持笔刷、橡皮和颜色选择"
绘图上下文与状态管理规范
Canvas本身无状态，所有样式、变换、裁剪都依赖ctx对象的当前状态栈。频繁手动重置易出错，应封装状态隔离逻辑。
- 每次绘制前调用
ctx.save()，绘制后配对ctx.restore()，避免跨操作污染 - 禁止全局复用同一
ctx对象处理多个独立图层（如UI控件层、内容绘制层、临时预览层） - 对复杂图形（如贝塞尔曲线、文字路径）预先缓存
Path2D对象，减少重复路径构建开销 - 使用
ctx.setTransform(1,0,0,1,0,0)代替ctx.resetTransform()（后者兼容性差）
交互事件与坐标映射规范
鼠标/触控坐标需经设备像素比（window.devicePixelRatio）校准，并考虑Canvas CSS缩放带来的视口偏移。
- 获取真实绘图坐标：用
getBoundingClientRect()计算画布在视口中的位置，再结合clientX/Y反算画布内坐标 - 触摸事件需遍历
touches列表，区分单指拖拽与多指缩放，禁用默认行为e.preventDefault() - 悬停反馈（如工具提示、光标变化）应在
pointermove中节流处理，避免高频重绘 - 关键操作（如撤销、保存）必须绑定
pointerdown而非click，保障移动端响应及时性
渲染性能与资源生命周期规范
Canvas高性能不靠“拼命重绘”，而靠精准控制绘制节奏、合理利用离屏缓冲与内存回收。
- 动画循环统一用
requestAnimationFrame，禁用setInterval或setTimeout - 静态背景或不变UI组件，预先绘制到离屏
<canvas>（offscreen canvas），主画布仅合成 - 图像资源加载完成后再调用
drawImage，监听img.onload，避免空白或报错 - 销毁应用时，清除所有事件监听器、取消
requestAnimationFrame句柄，并将ctx引用置为null防止内存泄漏
