用HTML5编写一段烟花代码
时间: 2023-03-20 08:01:17 浏览: 131
以下是一个使用HTML5编写的简单烟花代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>烟花效果</title>
<style>
canvas {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
</style>
</head>
<body>
<canvas id="fireworks"></canvas>
<script>
var canvas = document.getElementById("fireworks");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var particles = [];
var particleCount = 100;
var colors = ["#FF1461", "#18FF92", "#5A87FF", "#FBF38C"];
function Particle(x, y) {
this.x = x;
this.y = y;
this.color = colors[Math.floor(Math.random() * colors.length)];
this.radius = Math.random() * 20 + 10;
this.vx = Math.random() * 5 - 2.5;
this.vy = Math.random() * 5 - 2.5;
this.alpha = 1;
this.gravity = 0.05;
}
Particle.prototype.draw = function() {
ctx.globalAlpha = this.alpha;
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
ctx.fillStyle = this.color;
ctx.fill();
ctx.closePath();
};
Particle.prototype.update = function() {
this.x += this.vx;
this.y += this.vy;
this.alpha -= 0.01;
this.radius -= 0.1;
this.vy += this.gravity;
};
for (var i = 0; i < particleCount; i++) {
var x = canvas.width / 2;
var y = canvas.height / 2;
var particle = new Particle(x, y);
particles.push(particle);
}
function loop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < particles.length; i++) {
particles[i].draw();
particles[i].update();
if (particles[i].alpha <= 0) {
particles.splice(i, 1);
}
}
requestAnimationFrame(loop);
}
loop();
canvas.addEventListener("click", function(event) {
var x = event.clientX;
var y = event.clientY;
for (var i = 0; i < particleCount; i++) {
var particle = new Particle(x, y);
particles.push(particle);
}
});
</script>
</body>
</html>
```
这个代码创建了一个画布元素,并在画布上绘制了彩色的圆形粒子。通过点击鼠标可以在画布上添加更多的粒子,从而形成烟花效果。
阅读全文