<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>春节烟花庆祝</title>
</head>
<body>
<div class="greetings">
<h1>春节快乐！</h1>
<h1>舒娜我爱你！</h1>
<p>欢迎来到我们的烟花庆祝活动</p>
</div>
<canvas id="fireworksCanvas"></canvas>
</body>
</html>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: black;
color: white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.greetings h1, .greetings p {
z-index: 2;
text-align: center;
}
/* 简单的动画效果增强视觉 */
.greetings h1 {
animation: glow 1s ease-in-out infinite alternate;
}
.greetings p {
animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
from {
text-shadow: 0 0 10px red, 0 0 20px red, 0 0 30px red, 0 0 40px red, 0 0 50px red, 0 0 60px red;
}
to {
text-shadow: 0 0 20px yellow, 0 0 30px yellow, 0 0 40px yellow, 0 0 50px yellow, 0 0 60px yellow, 0 0 70px yellow;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
var canvas = document.getElementById('fireworksCanvas');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
function Particle(x, y, vx, vy, gravity) {
this.x = x;
this.y = y;
this.vx = vx;
this.vy = vy;
this.gravity = gravity;
this.alpha = 1;
this.color = `hsla(${Math.random() * 360}, 100%, 50%, ${this.alpha})`;
}
Particle.prototype.update = function() {
this.vy += this.gravity;
this.x += this.vx;
this.y += this.vy;
this.alpha -= 0.015;
};
Particle.prototype.draw = function() {
ctx.globalCompositeOperation = 'lighter';
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, Math.random() * 3 + 1, 0, 2 * Math.PI);
ctx.fill();
};
var particles = [];
function spawnFireworks() {
// 增加生成烟花的数量
var count = Math.random() * 20 + 20; // 原来是 Math.random() * 10 + 10
for (var i = 0; i < count; i++) {
var particle = new Particle(canvas.width * Math.random(), canvas.height * Math.random(), Math.random() * 6 - 3, Math.random() * -3 - 1, 0.05);
particles.push(particle);
}
}
function explode(x, y) {
// 增加每次点击产生烟花的粒子数
var count = 100; // 原来是 100
for (var i = 0; i < count; i++) {
var vx = Math.random() * 5 - 2.5;
var vy = Math.random() * 5 - 2.5;
particles.push(new Particle(x, y, vx, vy, 0.04));
}
}
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach(function(particle, index) {
particle.update();
particle.draw();
if (particle.alpha <= 0) {
particles.splice(index, 1);
}
});
}
// 减小生成烟花的间隔时间，让烟花更频繁地出现
setInterval(spawnFireworks, 500); // 原来是 1000
canvas.addEventListener('click', function(e) {
explode(e.clientX, e.clientY);
});
animate();
});
</script>
原生JavaScript编写春节烟花网页 快去和喜欢的人一起放烟花吧
104 浏览量
2024-02-06
20:52:00
上传
评论
收藏 3KB ZIP 举报
烟花.zip （2个子文件） 
index.html 3KB index (2).html 4KB资源评论
小孟的报错日记
- 粉丝: 57
- 资源: 11
