帮我写一个玫瑰爱心花雨粒子代码
时间: 2024-12-22 11:29:15 浏览: 10
创建一个玫瑰爱心花雨粒子效果通常涉及到图形渲染、动画和随机元素。这是一个基本的JavaScript和HTML示例,使用了Canvas API来模拟这样的场景:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="particle-canvas" width="600" height="400"></canvas>
<script>
// 获取画布和上下文
const canvas = document.getElementById('particle-canvas');
const ctx = canvas.getContext('2d');
let particles = [];
let particleCount = 50; // 粒子数量
function createParticle() {
const x = Math.random() * canvas.width;
const y = canvas.height;
particles.push({
x,
y,
size: Math.random() * 8 + 4,
velocityY: -Math.random() * 5,
color: `hsl(${Math.random() * 360}, 100%, 70%)`
});
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < particles.length; i++) {
const particle = particles[i];
if (particle.y >= canvas.height) { // 越出屏幕删除
particles.splice(i, 1);
continue;
}
// 绘制爱心形状
ctx.beginPath();
ctx.arc(particle.x, particle.y - particle.size / 2, particle.size / 2, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = particle.color;
ctx.fill();
// 更新位置
particle.y += particle.velocityY;
// 模拟下落并改变颜色渐变
particle.color = `hsl(${Math.round((particle.color.split(',')[1]) / 100 * 360)}, ${Math.min(particle.y / particle.size * 100, 100)}%, ${particle.color.split(',')[2]}%)`;
}
requestAnimationFrame(draw); // 每帧都调用自己
}
// 创建初始粒子
for (let i = 0; i < particleCount; i++) {
createParticle();
}
draw(); // 开始绘制
</script>
</body>
</html>
```
这个代码片段将创建一个简单的爱心形状的粒子雨,每帧随机生成新粒子并在屏幕上落下。粒子的颜色会随着下落逐渐变化。
阅读全文