帮我写一个html代码,实现烟花绽放然后坠落的功能,并添加文字:杨文建
时间: 2024-03-18 08:40:48 浏览: 57
以下是一个简单的实现烟花绽放然后坠落的HTML代码,并添加了“杨文建”这个文字:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>烟花绽放</title>
<style>
#canvas {
background: #000;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
h1 {
color: #fff;
text-align: center;
position: absolute;
top: 50%;
width: 100%;
font-size: 5rem;
font-weight: bold;
transform: translateY(-50%);
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<h1>杨文建</h1>
<script>
// 获取canvas元素
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 设置canvas宽高
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 烟花粒子数组
var particles = [];
// 烟花粒子数量
var particleCount = 30;
// 烟花粒子构造函数
function Particle(x, y, color) {
this.x = x;
this.y = y;
this.color = color;
this.radius = 2;
this.vx = Math.random() * 10 - 5;
this.vy = Math.random() * 10 - 5;
this.gravity = 0.2;
}
// 烟花绘制函数
function drawFirework(x, y) {
// 随机颜色
var color = 'rgb(' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ')';
// 创建烟花粒子
for (var i = 0; i < particleCount; i++) {
particles.push(new Particle(x, y, color));
}
// 绘制烟花
for (var j = 0; j < particles.length; j++) {
ctx.beginPath();
ctx.arc(particles[j].x, particles[j].y, particles[j].radius, 0, Math.PI * 2);
ctx.fillStyle = particles[j].color;
ctx.fill();
// 烟花粒子运动
particles[j].x += particles[j].vx;
particles[j].y += particles[j].vy;
particles[j].vy += particles[j].gravity;
particles[j].radius -= 0.02;
}
}
// 鼠标点击事件
document.addEventListener('click', function(e) {
var x = e.clientX;
var y = e.clientY;
drawFirework(x, y);
});
</script>
</body>
</html>
```
你可以将上述代码保存为一个HTML文件,然后用浏览器打开,就可以看到烟花绽放并坠落的效果,并且中间有“杨文建”这个文字。
阅读全文