html表白烟花代码
时间: 2023-10-22 21:09:15 浏览: 50
好的,以下是一个简单的 HTML 表白烟花代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表白烟花</title>
<style>
body {
background-color: black;
}
canvas {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'white';
ctx.font = 'bold 50px Arial';
ctx.textAlign = 'center';
ctx.fillText('我喜欢你', canvas.width / 2, canvas.height / 2);
var particles = [];
var particleCount = 100;
var particleSpeed = 5;
function Particle(x, y) {
this.x = x;
this.y = y;
this.vx = Math.random() * particleSpeed - particleSpeed / 2;
this.vy = Math.random() * particleSpeed - particleSpeed / 2;
this.color = 'hsl(' + Math.random() * 360 + ', 100%, 50%)';
this.radius = Math.random() * 3 + 1;
this.life = Math.random() * 50 + 50;
this.remainingLife = this.life;
}
function createParticles(x, y) {
for (var i = 0; i < particleCount; i++) {
particles.push(new Particle(x, y));
}
}
canvas.addEventListener('click', function(event) {
createParticles(event.clientX, event.clientY);
});
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'white';
ctx.font = 'bold 50px Arial';
ctx.textAlign = 'center';
ctx.fillText('我喜欢你', canvas.width / 2, canvas.height / 2);
for (var i = 0; i < particles.length; i++) {
var p = particles[i];
ctx.beginPath();
ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
ctx.fillStyle = p.color;
ctx.fill();
p.x += p.vx;
p.y += p.vy;
p.remainingLife--;
if (p.remainingLife <= 0) {
particles.splice(i, 1);
}
}
requestAnimationFrame(draw);
}
draw();
</script>
</body>
</html>
```