Canvas通过2D上下文实现高效绘图，利用requestAnimationFrame构建流畅动画循环，结合坐标变换与粒子系统可实现复杂动态效果。
Canvas 是 HTML5 提供的一个强大绘图区域，通过 JavaScript 可以在其中绘制图形、图像和实现复杂的动画效果。相比传统的 DOM 操作或 CSS 动画，Canvas 更适合处理高频率更新的大规模视觉内容，比如游戏、数据可视化或粒子系统。
理解 Canvas 坐标系统与绘图上下文
Canvas 本身只是一个矩形区域，真正的绘制操作依赖于其 2D 渲染上下文（context）。获取 context 后，才能调用绘图方法。
示例代码：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
Canvas 的坐标原点 (0,0) 位于左上角，x 向右增大，y 向下增大。所有图形都基于这个坐标系进行定位。掌握坐标的变换（如平移、旋转、缩放）是实现高级动画的基础。
使用 requestAnimationFrame 实现流畅动画
传统 setInterval 或 setTimeout 容易造成卡顿或掉帧。requestAnimationFrame 能让浏览器自动优化刷新节奏，与屏幕刷新率同步，实现更流畅的动画。
立即学习“Java免费学习笔记（深入）”；
基本动画循环结构如下：
- 清空画布（clearRect）
- 更新图形状态（位置、颜色、速度等）
- 重新绘制所有元素
- 递归调用 requestAnimationFrame 进入下一帧
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 更新并绘制图形
drawBall();
requestAnimationFrame(animate);
}
animate();
应用图形变换实现动态视觉效果
Canvas 提供了 translate、rotate、scale 等方法，可以在不改变绘制逻辑的情况下对坐标系进行变换，非常适合制作旋转、缩放或轨迹动画。
关键点：
- 每次变换会影响后续所有绘制操作
- 使用 save() 和 restore() 保存和恢复绘图状态，避免干扰其他图形
- 组合多个变换时注意顺序（先平移再旋转，效果不同于先旋转再平移）
ctx.save();
ctx.translate(canvas.width/2, canvas.height/2);
ctx.rotate(Math.PI / 4);
ctx.fillStyle = 'blue';
ctx.fillRect(-50, -25, 100, 50);
ctx.restore();
实现粒子系统与物理模拟
高级动画常涉及大量独立运动的元素，如烟花、雨滴或流体效果。这类效果通常通过“粒子系统”实现。
每个粒子是一个对象，包含位置、速度、加速度、生命周期等属性。
实现步骤：
- 创建粒子类或构造函数
- 维护一个粒子数组，在每帧中遍历更新状态
- 根据生命周期决定是否移除粒子
- 使用透明度或尺寸变化模拟衰减效果
particles.forEach((p, index) => {
p.x += p.vx;
p.y += p.vy;
p.alpha -= 0.01;
if (p.alpha <= 0) particles.splice(index, 1);
});
基本上就这些。掌握 Canvas 动画的关键在于理解渲染循环、状态管理和坐标变换。只要逻辑清晰，配合数学知识（三角函数、向量运算），就能做出非常炫酷的效果。不复杂但容易忽略的是性能控制——避免绘制过多对象或频繁操作 DOM。合理使用离屏 Canvas 或分层绘制也能提升效率。
