弹跳小球创意点亮canvas新视野

2023-10-23 14:43:22

canvas简介

canvas是HTML5中新增的一个元素，它可以用来创建二维图形。canvas元素的语法如下：

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

其中，id属性是canvas元素的唯一标识符，width属性是canvas元素的宽度，height属性是canvas元素的高度。

要使用canvas，我们需要首先获取canvas元素的上下文对象。上下文对象提供了许多方法，可以用来绘制图形。上下文对象的语法如下：

var ctx = canvas.getContext("2d");

其中，canvas是canvas元素的ID。

canvas动画

canvas动画是使用canvas元素创建的动画。canvas动画的原理是，不断地重绘canvas元素，从而 tạo ra hiệu ứng动画。

要创建canvas动画，我们需要使用一个回调函数。回调函数会在浏览器重绘之前调用。回调函数的语法如下：

function draw() {
  // 绘制图形
}

回调函数中，我们可以使用上下文对象来绘制图形。

示例代码

以下是一个简单的canvas弹跳小球动画的示例代码：

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

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

    // 小球的位置和速度
    var x = 100;
    var y = 100;
    var vx = 5;
    var vy = -5;

    // 重力加速度
    var g = 0.1;

    // 绘制小球
    function draw() {
      // 清除画布
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // 绘制小球
      ctx.beginPath();
      ctx.arc(x, y, 10, 0, 2 * Math.PI);
      ctx.fillStyle = "red";
      ctx.fill();

      // 更新小球的位置和速度
      x += vx;
      y += vy;

      // 检测小球是否碰到地面
      if (y > canvas.height - 10) {
        vy = -vy;
      }

      // 检测小球是否碰到天花板
      if (y < 10) {
        vy = -vy;
      }

      // 检测小球是否碰到左边墙
      if (x < 10) {
        vx = -vx;
      }

      // 检测小球是否碰到右边墙
      if (x > canvas.width - 10) {
        vx = -vx;
      }

      // 重力作用
      vy += g;

      // 请求浏览器重绘
      requestAnimationFrame(draw);
    }

    // 启动动画
    draw();
  </script>
</body>
</html>