用canvas实现重力小球动画,其中小球的颜色、大小、位置是随机设定的
时间: 2024-10-15 09:30:19 浏览: 8
在HTML5 Canvas上创建一个重力小球动画,首先需要设置一个基础框架,包括创建Canvas元素、获取绘图上下文,并定义一些关键变量,如小球颜色、大小和初始位置等。以下是一个简化的步骤:
1. **HTML结构**:
```html
<!DOCTYPE html>
<html lang="en">
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
```
2. **JavaScript部分**:
```javascript
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 随机生成小球属性
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function randomBallProperties() {
const radius = Math.floor(Math.random() * 50) + 10; // 随机大小范围
const x = Math.random() * canvas.width; // 随机x坐标
const y = Math.random() * canvas.height; // 随机y坐标
return { color: getRandomColor(), radius, x, y };
}
// 动画函数
function animate() {
const ballProps = randomBallProperties();
// 绘制小球
ctx.beginPath();
ctx.arc(ballProps.x, ballProps.y, ballProps.radius, 0, Math.PI * 2);
ctx.fillStyle = ballProps.color;
ctx.fill();
// 撞到边界反弹
if (ballProps.x + ballProps.radius > canvas.width || ballProps.x - ballProps.radius < 0) {
ballProps.x = ballProps.x + (Math.random() * 2 - 1) * ballProps.radius * 2;
}
if (ballProps.y + ballProps.radius > canvas.height || ballProps.y - ballProps.radius < 0) {
ballProps.y = ballProps.y + (Math.random() * 2 - 1) * ballProps.radius * 2;
}
requestAnimationFrame(animate);
}
animate();
```
这个例子中,`randomBallProperties` 函数会返回一个包含小球颜色、大小和位置的对象,然后在 `animate` 函数里,每次循环都会绘制一个新的随机小球,并处理它的碰撞反弹。
阅读全文