首页html生日快乐烟花粒子代码

html生日快乐烟花粒子代码

时间: 2023-10-21 18:06:54 浏览: 412

以下是一个简单的HTML生日快乐烟花粒子代码： ```html <!DOCTYPE html> <html> <head> <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"); var particles = []; var particleCount = 100; var particleSpeed = 2; for (var i = 0; i < particleCount; i++) { particles.push(new particle()); } function particle() { this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.vx = (Math.random() - 0.5) * particleSpeed; this.vy = (Math.random() - 0.5) * particleSpeed; this.size = Math.random() * 5 + 1; this.color = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")"; } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < particles.length; i++) { ctx.beginPath(); ctx.fillStyle = particles[i].color; ctx.arc(particles[i].x, particles[i].y, particles[i].size, 0, Math.PI * 2); ctx.fill(); particles[i].x += particles[i].vx; particles[i].y += particles[i].vy; if (particles[i].x < -50) { particles[i].x = canvas.width + 50; } if (particles[i].y < -50) { particles[i].y = canvas.height + 50; } if (particles[i].x > canvas.width + 50) { particles[i].x = -50; } if (particles[i].y > canvas.height + 50) { particles[i].y = -50; } } requestAnimationFrame(draw); } draw(); </script> </body> </html> ```

阅读全文