前端Wiki/HTML5/进阶/Canvas 绘图

简单动画

Canvas 动画的原理是"快速翻页"：每帧清空画布 → 重画所有内容 → 请求下一帧。驱动下一帧的标准方法是 requestAnimationFrame(fn)，它把回调安排到浏览器下一次重绘前执行（通常 60 次/秒），页面切到后台时自动暂停，比 setInterval 更省电更流畅。

动画数据的组织方式：把位置、速度放在变量里，每帧根据速度更新位置（x += vx），碰到边界就把速度取反（vx = -vx），这就是最简单的物理反弹。多个物体就用数组存多组状态，帧循环里遍历绘制。

两个注意点：每帧第一件事是 clearRect 清屏，否则轨迹会拖影（除非拖影就是想要的特效）；动画变量不要写在回调内部重新初始化，否则永远停在第一帧。

本节要点动画三步：清屏 → 更新状态 → 重绘，用 requestAnimationFrame 驱动；反弹 = 越界时速度取反；状态放外部变量，每帧必须 clearRect。

HTML

<canvas id="cv" width="400" height="200" style="border:1px solid #555"></canvas>
<script>
var ctx = document.getElementById('cv').getContext('2d');
var x = 50, y = 100, vx = 3, vy = 2, r = 10;   // 位置与速度

function draw() {
  ctx.clearRect(0, 0, 400, 200);   // 1. 每帧先清空画布

  x += vx; y += vy;                // 2. 按速度更新位置
  if (x < r || x > 400 - r) vx = -vx;   // 碰左右墙：水平速度取反
  if (y < r || y > 200 - r) vy = -vy;   // 碰上下墙：垂直速度取反

  ctx.beginPath();                 // 3. 重绘小球
  ctx.arc(x, y, r, 0, Math.PI * 2);
  ctx.fillStyle = '#e5534b';
  ctx.fill();

  requestAnimationFrame(draw);     // 4. 请求下一帧，循环往复
}
draw();
</script>

🔗 相关词条canvas 浏览器数组 Web Components localStorage FileReader

📚 推荐阅读

ECharts 图表教程万象云档

PWA 应用实战万象云档

移动前端开发经验指南万象云档

Socket.IO v4 中文文档万象云档

Electron 27 中文文档万象云档

来自万象云档的免费在线书籍，点击封面直接阅读