<!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等参数来调整小球的运动和外观。
这提供了一个基本的自由落体模拟。你可以根据需要进一步扩展，例如添加空气阻力、水平运动等。
标签：canvas,const,自由落体,小球,ctx,update,ballRadius From： https://www.cnblogs.com/ai888/p/18594173