超炫酷的烟花代码html
时间: 2023-11-29 18:45:01 浏览: 79
HTML前端酷炫烟花表白代码源文件-(CSDN@追光者♂)-20230904
以下是一个简单的HTML5烟花特效的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5烟花特效</title>
<style type="text/css">
body {
background-color: #000;
}
canvas {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas'); canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext('2d');
var particles = [];
var particleCount = 100;
var particleSpeed = 2;
var particleSize = 3;
var colors = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722', '#795548'];
var mouseX = canvas.width / 2;
var mouseY = canvas.height / 2;
function Particle() {
this.x = canvas.width / 2;
this.y = canvas.height / 2;
this.vx = (Math.random() - 0.5) * particleSpeed;
this.vy = (Math.random() - 0.5) * particleSpeed;
this.size = particleSize;
this.color = colors[Math.floor(Math.random() * colors.length)];
}
Particle.prototype.update = function() {
this.x += this.vx;
this.y += this.vy;
this.size -= 0.05;
}
Particle.prototype.draw = function() {
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
}
function createParticles() {
for (var i = 0; i < particleCount; i++) {
particles.push(new Particle());
}
}
function updateParticles() {
for (var i = 0; i < particles.length; i++) {
particles[i].update();
if (particles[i].size <= 0) {
particles.splice(i, 1);
}
}
}
function drawParticles() {
for (var i = 0; i < particles.length; i++) {
particles[i].draw();
}
}
function loop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
createParticles();
updateParticles();
drawParticles();
requestAnimationFrame(loop);
}
canvas.addEventListener('mousemove', function(event) {
mouseX = event.clientX;
mouseY = event.clientY;
});
loop();
</script>
</body>
</html>
```
阅读全文