html彩色烟花特效代码
时间: 2023-11-21 11:56:21 浏览: 114
HTML5彩色烟花粒子动画特效特效代码
以下是一个使用HTML5 canvas元素绘制彩色烟花特效的代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>彩色烟花特效</title>
<style>
canvas {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var particles = [];
var particleCount = 100;
var colors = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722', '#795548'];
var minRadius = 5;
var maxRadius = 20;
var minSpeed = 1;
var maxSpeed = 10;
function Particle() {
this.radius = Math.random() * (maxRadius - minRadius) + minRadius;
this.color = colors[Math.floor(Math.random() * colors.length)];
this.x = canvas.width / 2;
this.y = canvas.height / 2;
this.speed = Math.random() * (maxSpeed - minSpeed) + minSpeed;
this.directionAngle = Math.random() * 360;
this.velocity = {
x: Math.cos(this.directionAngle) * this.speed,
y: Math.sin(this.directionAngle) * this.speed
};
}
Particle.prototype.update = function() {
this.x += this.velocity.x;
this.y += this.velocity.y;
if (this.radius > 0.2) {
this.radius -= 0.1;
}
};
Particle.prototype.draw = function() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
};
function createParticles() {
for (var i = 0; i < particleCount; i++) {
var particle = new Particle();
particles.push(particle);
}
}
function drawParticles() {
for (var i = 0; i < particles.length; i++) {
particles[i].update();
particles[i].draw();
}
}
function animateParticles() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawParticles();
requestAnimationFrame(animateParticles);
}
createParticles();
animateParticles();
</script>
</body>
</html>
```
阅读全文