HTML Canvas requestAnimationFrame 暂停

在本文中，我们将介绍如何使用HTML Canvas的requestAnimationFrame函数来实现动画暂停功能。

阅读更多：HTML 教程

什么是requestAnimationFrame？

requestAnimationFrame是一个在每一帧动画开始之前被调用的函数，用于请求浏览器在下一次重绘之前调用指定的回调函数，以实现平滑的动画效果。它的使用可以代替setTimeout和setInterval来创建动画。

使用requestAnimationFrame创建Canvas动画

首先，我们需要在HTML文件中创建一个Canvas元素用于绘制动画：

<canvas id="myCanvas" width="400" height="400"></canvas>

接下来，我们使用JavaScript来创建动画效果。在这个例子中，我们将绘制一个移动的小方块：

// 获取Canvas元素
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// 定义小方块的位置和速度
let x = 50;
let y = 50;
let speedX = 2;
let speedY = 2;

// 绘制小方块的函数
function draw() {
  // 清空Canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制小方块
  ctx.fillRect(x, y, 50, 50);

  // 更新小方块的位置
  x += speedX;
  y += speedY;

  // 边界检测
  if (x < 0 || x > canvas.width - 50) {
    speedX = -speedX;
  }
  if (y < 0 || y > canvas.height - 50) {
    speedY = -speedY;
  }

  // 使用requestAnimationFrame来实现动画效果
  requestAnimationFrame(draw);
}

// 第一次调用绘制函数
draw();

在上面的代码中，我们首先获取Canvas元素和2D上下文对象。然后定义了小方块的位置和速度。draw函数用于绘制小方块，并在每一帧动画结束时重新绘制。最后，通过调用requestAnimationFrame方法来启动动画。

如何暂停动画？

使用requestAnimationFrame创建的动画默认是持续的。但是，我们可以通过一些技巧来实现动画的暂停和继续。

一种简单的方法是使用一个变量来表示动画的状态，例如：

let isPaused = false;

function togglePause() {
  isPaused = !isPaused;

  if (!isPaused) {
    draw(); // 继续动画
  }
}

// 监听键盘事件，按下空格键暂停或继续动画
document.addEventListener("keydown", (event) => {
  if (event.keyCode === 32) {
    togglePause(); // 暂停或继续动画
  }
});

在上述代码中，我们定义了一个isPaused变量来表示动画的状态，默认为false表示动画正在播放。togglePause函数用于切换动画的暂停和继续状态，并根据状态决定是否重新启动动画。

通过监听键盘事件，当用户按下空格键时，调用togglePause函数来暂停或继续动画。

示例：点击按钮暂停动画

除了使用键盘事件，我们还可以使用按钮来控制动画的暂停和继续。下面是一个示例：

<button id="pauseButton">暂停/继续</button>
<script>
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d");

  ...

  let isPaused = false;

  function togglePause() {
    isPaused = !isPaused;

    if (isPaused) {
      cancelAnimationFrame(animationId); // 取消动画
    } else {
      animationId = requestAnimationFrame(draw); // 重新启动动画
    }
  }

  const pauseButton = document.getElementById("pauseButton");
  pauseButton.addEventListener("click", togglePause);
</script>

在上面的示例中，我们创建了一个按钮元素来暂停和继续动画。通过监听按钮的点击事件，调用togglePause函数来切换动画的暂停和继续状态。当动画暂停时，使用cancelAnimationFrame方法取消当前的动画请求，而当动画继续时，使用requestAnimationFrame重新发起动画请求。

这样，我们就可以通过点击按钮来实现动画的暂停和继续了。