JavaScript图形绘制_Canvas高级动画技巧

夢幻星辰 2025-11-20 00:00:00 次阅读

掌握Canvas动画需运用requestAnimationFrame实现流畅渲染，结合图形变换与save/restore状态管理避免坐标混乱，通过粒子系统模拟复杂动态效果，并采用双缓冲绘图提升性能，最终实现高效、电影级视觉表现。

Canvas 是 HTML5 提供的一个强大绘图区域，通过 JavaScript 可以实现复杂的图形绘制与高级动画效果。掌握一些关键技巧，能让动画更流畅、视觉更丰富。

1. 使用 requestAnimationFrame 控制动画节奏

传统用 setInterval 或 setTimeout 实现动画容易卡顿，requestAnimationFrame 是浏览器专为动画优化的 API，能根据屏幕刷新率自动调整执行频率，使动画更平滑。

基本用法如下：

function animate() {
  // 更新图形状态
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 绘制内容
  draw();
  // 递归调用
  requestAnimationFrame(animate);
}
animate();

这种方式避免了掉帧，也便于暂停和控制动画流程。

2. 图形变换与状态管理

Canvas 提供 translate、rotate、scale 等变换方法，常用于制作旋转、缩放动画。但频繁变换容易导致坐标混乱，建议配合 save() 和 restore() 使用。

例如实现一个旋转的矩形：

function drawRotatingRect(angle) {
  ctx.save();
  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.rotate(angle);
  ctx.fillStyle = 'blue';
  ctx.fillRect(-50, -25, 100, 50);
  ctx.restore();
}

save() 保存当前绘图状态（包括变换、样式），restore() 恢复，防止影响后续绘制。

3. 粒子系统与动态效果

高级动画常使用粒子系统模拟火焰、烟雾、爆炸等效果。每个粒子是一个对象，包含位置、速度、颜色、生命周期等属性。

核心思路：

创建粒子数组，每帧更新位置和状态
根据生命周期决定是否移除粒子
使用透明度渐变增强真实感

示例片段：

const particles = [];
function createParticle() {
  particles.push({
    x: canvas.width / 2,
    y: canvas.height / 2,
    vx: Math.random() * 4 - 2,
    vy: Math.random() * 4 - 2,
    alpha: 1,
    decay: Math.random() * 0.02 + 0.01
  });
}

在每一帧中遍历并绘制粒子，同时更新其透明度，实现淡出效果。