Canvas动画入门基础之运动动画绘制

前端

2023-11-09 08:46:09

Canvas概述

HTML5 Canvas是HTML5新增的元素，它是一个位图，它可以让您在Web浏览器中使用JavaScript来绘制图形。

动画概述

动画是指一段连续的图像序列，当这些图像序列以一定速度播放时，就会产生动画效果。

运动动画概述

运动动画是指对象在空间中运动的动画效果。

Canvas运动动画绘制方法

Canvas运动动画的绘制主要有两种方法：setInterval方法和requestAnimationFrame方法。

setInterval方法

setInterval方法是JavaScript中的一个方法，它可以以指定的间隔时间执行指定的代码。

setInterval(function() {
  // 要执行的代码
}, 1000);

上面的代码会每隔1000毫秒（即1秒）执行一次指定的代码。

requestAnimationFrame方法

requestAnimationFrame方法是HTML5新增的一个方法，它可以请求浏览器在屏幕下一次刷新的时候执行指定的代码。

requestAnimationFrame(function() {
  // 要执行的代码
});

requestAnimationFrame方法的优点在于它与浏览器的刷新频率同步，因此可以避免动画与浏览器刷新不同步的情况发生。

Canvas运动动画绘制实例

下面是一个Canvas运动动画绘制的实例，演示了一个小球从屏幕顶部落下并反弹的动画效果。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="canvas" width="500" height="500"></canvas>

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

    var ballX = 250;
    var ballY = 0;
    var ballSpeedY = 10;

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

      ctx.beginPath();
      ctx.arc(ballX, ballY, 10, 0, 2 * Math.PI);
      ctx.fillStyle = "red";
      ctx.fill();

      ballY += ballSpeedY;

      if (ballY >= 490) {
        ballSpeedY = -ballSpeedY;
      }

      requestAnimationFrame(draw);
    }

    draw();
  </script>
</body>
</html>