构建Canvas交互式应用开发规范

Canvas交互式应用开发并非“写完能动就行”，而是需要一整套兼顾可维护性、性能和用户体验的开发规范。它不仅仅是画几条线、响应几个鼠标事件，而是从结构设计、状态管理到渲染策略的完整工程化实践。以下首先梳理几个关键规范，后续逐步展开详述。

HTML结构与Canvas初始化规范

Canvas的宽度和高度属性必须显式声明为纯数字，不带px单位，这决定了绘图坐标系的实际像素范围。CSS中设置的宽高仅用于缩放显示，不会改变绘图分辨率——许多模糊、锯齿和坐标偏移的问题，根源就在此处。

• 直接在标签中写入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上，主画布仅用于合成
• 图像资源加载完成后再调用drawImage，监听img.onload，避免空白或报错
• 销毁应用时，清理所有事件监听器、取消requestAnimationFrame句柄，并将ctx引用置为空