首页html祝福生日快乐烟花特效

html祝福生日快乐烟花特效

时间: 2023-10-19 12:09:30 浏览: 208

css实现生日烟花特效

您可以使用以下代码实现html祝福生日快乐烟花特效： ```html <!DOCTYPE html> <html> <head> <title>生日快乐</title> <style type="text/css"> body{ background-color: #000; } canvas{ position: absolute; top: 0; left: 0; z-index: -1; } </style> </head> <body> <canvas id="canvas"></canvas> <script type="text/javascript"> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var w = canvas.width = window.innerWidth; var h = canvas.height = window.innerHeight; function random(min, max){ return Math.random() * (max - min) + min; } function Circle(){ this.posX = random(0, w); this.posY = random(0, h); this.radius = random(10, 30); this.color = 'rgba('+~~random(0, 255)+','+~~random(0, 255)+','+~~random(0, 255)+', .8)'; this.speedX = random(-3, 3); this.speedY = random(-3, 3); this.angle = random(0, 360); this.angularSpeed = random(-6, 6); } Circle.prototype.draw = function(){ ctx.save(); ctx.translate(this.posX, this.posY); ctx.rotate(this.angle * Math.PI / 180); ctx.beginPath(); ctx.arc(0, 0, this.radius, 0, Math.PI * 2); ctx.fillStyle = this.color; ctx.fill(); ctx.closePath(); ctx.restore(); } Circle.prototype.update = function(){ this.posX += this.speedX; this.posY += this.speedY; this.angle += this.angularSpeed; if(this.posX < -50) this.posX = w + 50; if(this.posY < -50) this.posY = h + 50; if(this.posX > w + 50) this.posX = -50; if(this.posY > h + 50) this.posY = -50; } var circles = []; for(var i = 0; i < 100; i++){ circles.push(new Circle()); } function loop(){ ctx.clearRect(0, 0, w, h); for(var i = 0; i < circles.length; i++){ circles[i].update(); circles[i].draw(); } requestAnimationFrame(loop); } loop(); </script> </body> </html> ```

阅读全文