html粒子特效代码
时间: 2023-07-01 10:05:06 浏览: 57
以下是一个简单的 HTML 粒子特效代码,你可以在自己的网页中使用它:
```html
<!DOCTYPE html>
<html>
<head>
<title>Particle Effect</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000;
height: 100vh;
}
canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let particleArray;
// create particles
function init() {
particleArray = [];
for (let i = 0; i < 1000; i++) {
let x = Math.random() * canvas.width;
let y = Math.random() * canvas.height;
let speed = Math.random() * 4 + 1;
let directionX = Math.random() * 2 - 1;
let directionY = Math.random() * 2 - 1;
let color = '#fff';
particleArray.push(new Particle(x, y, directionX, directionY, speed, color));
}
}
// particle function
function Particle(x, y, directionX, directionY, speed, color) {
this.x = x;
this.y = y;
this.directionX = directionX;
this.directionY = directionY;
this.speed = speed;
this.color = color;
}
// draw particles
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < particleArray.length; i++) {
ctx.beginPath();
ctx.arc(particleArray[i].x, particleArray[i].y, 6, 0, Math.PI * 2);
ctx.fillStyle = particleArray[i].color;
ctx.fill();
update(particleArray[i]);
}
requestAnimationFrame(draw);
}
// update particles
function update(particle) {
if (particle.x > canvas.width || particle.x < 0) {
particle.directionX = -particle.directionX;
}
if (particle.y > canvas.height || particle.y < 0) {
particle.directionY = -particle.directionY;
}
particle.x += particle.directionX * particle.speed;
particle.y += particle.directionY * particle.speed;
}
init();
draw();
</script>
</body>
</html>
```
这个粒子特效代码会在网页中生成一堆白色小球(粒子),随机移动,碰到边缘会反弹。你可以根据需要更改颜色、数量、大小、速度等参数来创建你自己的粒子特效。