优化Canvas动画性能需减少重绘区域，使用ctx.clearRect(x, y, width, height)仅清除变化部分，避免全屏清空，降低绘制开销。
Canvas动画在JavaScript图形编程中非常常见，但随着绘制内容增多，性能问题会逐渐显现。要让动画流畅运行，必须从绘制机制、资源管理、渲染策略等多方面进行优化。
减少重绘区域
每次调用clearRect或重绘整个画布都会带来较大开销。只重绘发生变化的部分可以显著提升性能。
- 使用ctx.clearRect(x, y, width, height)清除局部区域，而非全屏清空
- 适用于粒子少、背景静态的场景
合理使用requestAnimationFrame
requestAnimationFrame（rAF）是浏览器专为动画设计的API，能自动匹配屏幕刷新率（通常60Hz），避免不必要的绘制。
- 避免使用setInterval或setTimeout控制动画循环
- rAF会在页面不可见时暂停，节省CPU和电量
- 结合时间戳控制动画节奏，确保跨设备一致性
避免频繁操作DOM和样式
Canvas本身是DOM元素，但频繁读取或修改其属性（如宽高、样式）会触发重排重绘。
立即学习“Java免费学习笔记（深入）”；
- 初始化时设置好canvas尺寸，避免运行时动态调整
- 将canvas样式（如position、z-index）通过CSS预设，不使用JS频繁修改
- 多个canvas图层可分离逻辑：背景层静态，前景层动态更新
简化绘图操作与图形复杂度
复杂的路径、阴影、渐变等绘制操作消耗大量GPU/CPU资源。
- 减少使用shadowBlur、strokeText等重型API
- 尽量用fillRect、drawImage等轻量方法
- 合并多个小图形为一个图像或精灵图（sprite sheet）批量绘制
利用离屏Canvas缓存
对于重复绘制且不变的内容（如角色、图标），可预先绘制到“离屏Canvas”中，再用drawImage快速复制。
- 创建一个不可见的canvas作为缓冲区
- 将复杂图形一次性绘制到缓冲canvas
- 主动画循环中直接将其作为图片绘制，极大减少路径计算
控制对象数量与垃圾回收
大量活动对象会导致内存占用上升，频繁创建销毁对象还会引发垃圾回收卡顿。
- 使用对象池管理粒子、子弹等短生命周期对象
- 避免在每帧中新建数组、对象，尽量复用
- 及时解除对canvas资源的引用，防止内存泄漏
基本上就这些。Canvas动画性能优化不是一蹴而就的事，关键在于理解浏览器渲染流程，并针对性减少每一帧的工作量。只要控制好绘制范围、频率和复杂度，就能实现流畅的视觉效果。
