使用canvas画一个小球自由落体的效果

<!DOCTYPE html>
<html>
<head>
<title>自由落体</title>
<style>
  body { margin: 0; }
  canvas { display: block; }
</style>
</head>
<body>

<canvas id="myCanvas"></canvas>

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

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let x = canvas.width / 2;
let y = 50;
let vy = 0;
const gravity = 0.5;
const ballRadius = 20;

function drawBall() {
  ctx.beginPath();
  ctx.arc(x, y, ballRadius, 0, Math.PI*2);
  ctx.fillStyle = "blue";
  ctx.fill();
  ctx.closePath();
}

function update() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  vy += gravity;
  y += vy;

  if (y + ballRadius > canvas.height) {
    y = canvas.height - ballRadius;
    vy *= -0.8; // 反弹，并损失一些能量
  }

  drawBall();

  requestAnimationFrame(update);
}

update();

</script>

</body>
</html>

代码解释:

HTML 部分:
- 创建一个 canvas 元素，用于绘制图形。
CSS 部分:
- 设置 body 的外边距为 0，使 canvas 占据整个页面。
- 设置 canvas 为块级元素。
JavaScript 部分:
- 获取 canvas 元素和 2D 绘图上下文。
- 设置 canvas 的宽度和高度为窗口的宽度和高度。
- 初始化小球的 x 坐标、y 坐标、垂直速度、重力加速度和半径。
drawBall() 函数:
- 绘制小球。
update() 函数:
- 清除画布。
- 更新小球的垂直速度和 y 坐标。
- 处理小球与底部碰撞：
  - 当小球触底时，将其 y 坐标设置为底部边界，并反转其垂直速度，乘以一个小于 1 的系数模拟能量损失，实现反弹效果。
- 绘制小球。
- 使用 requestAnimationFrame 循环调用 update() 函数，实现动画效果。

运行方法:

将代码保存为 HTML 文件 (例如 falling_ball.html)。
在浏览器中打开该 HTML 文件。

关键改进和补充说明:

反弹: 代码中加入了反弹效果，并模拟了能量损失，使小球反弹高度逐渐降低，更接近真实情况。
requestAnimationFrame: 使用 requestAnimationFrame 比 setInterval 或 setTimeout 更适合制作动画，因为它可以根据浏览器的刷新频率进行优化，提供更流畅的动画效果。
参数可调整: 可以修改 gravity、ballRadius 等参数来调整小球的运动和外观。

这提供了一个基本的自由落体模拟。你可以根据需要进一步扩展，例如添加空气阻力、水平运动等。

posted @ 2024-12-09 09:04 王铁柱6 阅读(43) 评论(0) 收藏举报

刷新页面返回顶部

使用canvas画一个小球自由落体的效果

公告