Ball JS：画布动画入门指南

2023-12-26 23:02:43

Ball JS：在画布上弹跳的小球

1. 介绍

大家好，欢迎来到Ball JS的奇妙世界！这一次，我们将探索canvas动画的魅力，通过JavaScript赋予小球灵动性，让它在画布上尽情弹跳，并实现暂停、播放和重置功能。准备好了吗？让我们一起踏上这次有趣的动画之旅！

2. HTML结构搭建

首先，我们需要搭建基本的HTML结构，创建一块画布元素，并为其添加一些必要的属性，包括宽度、高度和ID。具体如下：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="canvas" width="600px" height="400px"></canvas>
  <script src="ball.js"></script>
</body>
</html>

3. JavaScript核心逻辑

接下来，我们进入JavaScript代码的编写部分。为了让小球动起来，我们需要使用requestAnimationFrame()函数，它是一个用于创建动画的JavaScript API。requestAnimationFrame()函数会在浏览器每次重绘时调用我们的动画函数，从而实现连续的动画效果。

// 获取画布元素
var canvas = document.getElementById('canvas');

// 获取画布上下文
var ctx = canvas.getContext('2d');

// 定义小球的初始位置和速度
var ballX = 100;
var ballY = 100;
var ballVX = 5;
var ballVY = 5;

// 定义动画循环函数
function animate() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制小球
  ctx.beginPath();
  ctx.arc(ballX, ballY, 10, 0, 2 * Math.PI);
  ctx.fillStyle = 'red';
  ctx.fill();

  // 更新小球的位置
  ballX += ballVX;
  ballY += ballVY;

  // 检测小球是否碰到边界并反弹
  if (ballX < 0 || ballX > canvas.width) {
    ballVX = -ballVX;
  }
  if (ballY < 0 || ballY > canvas.height) {
    ballVY = -ballVY;
  }

  // 继续动画循环
  requestAnimationFrame(animate);
}

// 启动动画
animate();

4. 暂停、播放和重置功能

为了让我们的动画更加互动，我们添加了暂停、播放和重置功能。通过按钮来控制动画的运行状态，并在重置时将小球恢复到初始位置。

// 获取按钮元素
var pauseButton = document.getElementById('pauseButton');
var playButton = document.getElementById('playButton');
var resetButton = document.getElementById('resetButton');

// 添加事件监听器
pauseButton.addEventListener('click', function() {
  // 暂停动画
  cancelAnimationFrame(animationId);
});

playButton.addEventListener('click', function() {
  // 恢复动画
  animationId = requestAnimationFrame(animate);
});

resetButton.addEventListener('click', function() {
  // 重置小球的位置和速度
  ballX = 100;
  ballY = 100;
  ballVX = 5;
  ballVY = 5;

  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
});