写一个js的粒子特效
时间: 2024-09-23 15:05:32 浏览: 37
JavaScript编写粒子特效通常会结合HTML5的Canvas API或WebGL技术,以下是一个简单的HTML5 Canvas粒子动画的例子:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="particle-canvas" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById('particle-canvas');
const ctx = canvas.getContext('2d');
// 粒子配置
const particles = [];
for (let i = 0; i < 100; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
size: 5 + Math.random() * 10,
speed: 1 + Math.random(),
color: `hsl(${Math.random() * 360}, 100%, ${Math.random() * 0.8}%)`,
});
}
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach(particle => {
particle.x += particle.speed;
if (particle.x > canvas.width || particle.x < 0) {
particle.x = -particle.size;
particle.speed = -particle.speed;
}
particle.y += particle.speed;
if (particle.y > canvas.height || particle.y < 0) {
particle.y = -particle.size;
particle.speed = -particle.speed;
}
ctx.beginPath();
ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI*2);
ctx.fillStyle = particle.color;
ctx.fill();
});
}
animate();
</script>
</body>
</html>
```
这个例子创建了一个包含100个随机位置、大小和颜色的粒子,它们会在画布上按照一定的速度移动,当超出边界时反弹回来。每次刷新页面都会生成新的随机效果。