canvas性能与精度需依场景动态权衡：高频动画重性能，高清输出重精度，混合交互用分层，资源受限须精简。
Canvas 的性能和精度不是非此即彼的选择，而是随场景动态权衡的结果。关键在于识别当前任务的核心瓶颈：是帧率卡顿、内存溢出，还是边缘模糊、文字失真？不同场景下，优化侧重点天然不同。
高频动画场景：优先保性能，再控精度
游戏、实时数据可视化、粒子系统等每秒需重绘数十次的场景，CPU 和 GPU 时间极其紧张。此时应把“减少绘制调用”和“降低像素填充量”放在首位。
- 用 Path 批量绘制 替代循环调用 fillRect / arc —— 100 个矩形从 100 次调用压缩为 1 次 fillPath，实测可提升 3–5 倍渲染速度
- 避免每帧修改 context 状态（如 fillStyle、lineWidth），按颜色/线型对图形分组，同组连续绘制
- 静态背景或不变元素提前绘制到离屏 canvas，主画布只负责更新动态部分，大幅减少重复计算
- 控制绘制区域：用 clip() 或 clearRect() 局部擦除，而非全屏清空
高清图文输出场景：精度优先，性能兜底
报表导出、设计稿预览、印刷级图表等对清晰度敏感的场景，模糊、锯齿、字体发虚会直接影响专业可信度。此时必须适配物理像素。
- 根据 window.devicePixelRatio 动态设置 canvas.width/height，例如 CSS 宽高为 300×200，dpr=2 时设为 600×400
- 绘制前关闭抗锯齿干扰：ctx.imageSmoothingEnabled = false（对图标、像素画有效）；文字则保留 smooth 但配合 font-smoothing: antialiased
- 避免用 CSS 缩放 canvas 元素——改用 ctx.scale(dpr, dpr) 并在逻辑坐标中反向缩放，确保坐标计算不失真
- 文字渲染慎用 fillText，复杂排版建议用 SVG 转 canvas 或预渲染为 bitmap，规避浏览器字体栅格化差异
混合交互场景：分层策略最实用
地图、白板、UI 编辑器等既有大量静态图元，又有频繁拖拽、缩放、高亮的场景，单一 canvas 很难兼顾。推荐三层分离：
- 底层 canvas：缓存底图、网格、不可变图层（如地理底图），仅初始化或缩放时重绘
- 中层 canvas：承载用户添加的图形（线条、形状），按操作批次合并路径，支持撤销/重做快照
- 顶层 canvas：仅响应式绘制临时态（鼠标跟随、选区框、缩放指示器），每帧更新，不参与持久状态
- 三者叠加用绝对定位 + pointer-events: none 控制事件穿透，既保响应又免冗余渲染
资源受限环境：精简才是硬道理
低端设备、嵌入式 Webview、鸿蒙轻应用等内存与算力有限的环境，要主动做减法：
- 禁用不必要的 canvas 特性：关闭阴影（shadowBlur=0）、渐变（改用纯色）、合成模式（globalCompositeOperation 保持 source-over）
- 图像资源统一转为 WebP 格式并预解码，避免 drawImage 时同步解码阻塞主线程
- 用 requestIdleCallback 延迟非关键绘制（如辅助线、标注文字），确保核心交互帧率稳定在 60fps
- 监测 FPS：用 performance.now() 记录每帧耗时，当持续 >12ms 时自动降级（如减少粒子数、简化路径）
