不只画图，用Canvas轻松制作动图，快来探索

前端

2023-02-12 18:29:27

Canvas动图制作教程：让你的创意动起来

绘制交互式动图

Canvas，一种强大的HTML5元素，就像一块空白画布，等待着你的创意之笔。除了静态图像，它还能够轻松制作出栩栩如生的动图，让你随心所欲地表达创意。

了解基本概念

制作动图的第一步，是理解Canvas的基本原理：

Canvas元素： 一块虚拟画布，供你发挥创意，绘制图像。
Canvas上下文： Canvas的绘图环境，允许你在画布上运用JavaScript绘制图形。
绘图方法： 如fillRect()、strokeRect()、arc()，这些方法让你在画布上呈现各种形状。
动画帧： 动图的每一帧图像，播放的帧率越高，动图越流畅。

绘制图片

在制作动图之前，我们需要在Canvas上绘制一张图片，这里以一个简单的矩形为例：

<canvas id="canvas" width="500" height="500"></canvas>

<script>
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');

  ctx.fillStyle = 'red';
  ctx.fillRect(10, 10, 100, 100);
</script>

运行代码后，你将在Canvas上看到一个红色的矩形。

制作动图

现在，让我们给矩形赋予生命，制作一个动图。我们的目标是让矩形从左上角移动到右下角：

<canvas id="canvas" width="500" height="500"></canvas>

<script>
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');

  var x = 10;
  var y = 10;

  function draw() {
    ctx.clearRect(0, 0, 500, 500);

    ctx.fillStyle = 'red';
    ctx.fillRect(x, y, 100, 100);

    x += 5;
    y += 5;

    if (x > 400) {
      x = 10;
    }

    if (y > 400) {
      y = 10;
    }

    requestAnimationFrame(draw);
  }

  draw();
</script>