除夕烟花代码html
时间: 2024-02-23 07:54:30 浏览: 106
除夕烟花是一种常见的节日庆祝活动,如果你想在网页上实现烟花效果,可以使用HTML5和JavaScript来编写代码。下面是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>除夕烟花</title>
<style>
canvas {
background-color: black;
}
</style>
</head>
<body>
<canvas id="fireworksCanvas"></canvas>
<script>
// 创建画布
var canvas = document.getElementById("fireworksCanvas");
var ctx = canvas.getContext("2d");
// 设置画布大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 定义烟花粒子对象
function Particle(x, y) {
this.x = x;
this.y = y;
this.vx = Math.random() * 10 - 5;
this.vy = Math.random() * 10 - 5;
this.color = getRandomColor();
this.radius = Math.random() * 3 + 1;
this.alpha = 1;
}
// 更新粒子位置和透明度
Particle.prototype.update = function() {
this.x += this.vx;
this.y += this.vy;
this.alpha -= 0.01;
};
// 绘制粒子
Particle.prototype.draw = function() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.globalAlpha = this.alpha;
ctx.fill();
};
// 创建烟花
function createFirework() {
var x = Math.random() * canvas.width;
var y = canvas.height;
var particleCount = 100;
var particles = [];
for (var i = 0; i < particleCount; i++) {
var particle = new Particle(x, y);
particles.push(particle);
}
// 更新和绘制烟花粒子
function updateAndDrawParticles() {
particles.forEach(function(particle) {
particle.update();
particle.draw();
});
particles = particles.filter(function(particle) {
return particle.alpha > 0;
});
if (particles.length > 0) {
requestAnimationFrame(updateAndDrawParticles);
}
}
updateAndDrawParticles();
}
// 随机生成颜色
function getRandomColor() {
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
// 监听鼠标点击事件,创建烟花
document.addEventListener("click", function(event) {
createFirework();
});
</script>
</body>
</html>
```
这段代码使用了HTML5的`<canvas>`元素来绘制烟花效果。通过JavaScript创建了一个`Particle`对象来表示烟花粒子,然后在点击页面时创建烟花并更新和绘制粒子的位置和透明度。
希望这个代码能帮到你!如果有任何问题,请随时提问。
阅读全文