弹跳小球：给您的 Canvas 增添活力

2023-12-15 15:03:02

用 Canvas 绘制弹跳小球：打造栩栩如生的网页动画

绘制小球

在 Canvas 上绘制小球，我们使用弧形路径 arc() 方法。它以给定的半径和角度绘制弧线，从而创建圆形或椭圆形。对于一个半径为 100 像素的小球，我们使用以下代码：

ctx.beginPath();
ctx.arc(100, 100, 100, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill();

赋予物理属性

为了让小球动起来，我们需要赋予其物理属性，如位置、速度和加速度。这些属性将决定小球的运动轨迹。位置由 x 和 y 坐标表示，而速度和加速度由 vx、vy、ax 和 ay 分量表示。

处理碰撞检测

当小球在 Canvas 上移动时，它可能会撞到边界或其他物体。为了实现碰撞检测，我们需要计算小球的位置和速度，并在它与边界或物体相交时调整其运动。

将小球动画添加到网页

使用 JavaScript 控制小球的运动并使用 CSS 定义小球的外观。一个简单的 JavaScript 动画循环如下所示：

function animate() {
  requestAnimationFrame(animate);

  // 更新小球的位置
  updateBall();

  // 处理碰撞检测
  checkCollision();

  // 绘制小球
  drawBall();
}

animate();

代码示例

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

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

var ball = {
  x: 100,
  y: 100,
  vx: 5,
  vy: 5,
  radius: 100,
  color: 'red'
};

function drawBall() {
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI);
  ctx.fillStyle = ball.color;
  ctx.fill();
}

function updateBall() {
  ball.x += ball.vx;
  ball.y += ball.vy;
}

function checkCollision() {
  if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
    ball.vx = -ball.vx;
  }
  if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
    ball.vy = -ball.vy;
  }
}

animate();