写一段html烟花代码

作者：从前慢现在也慢 | 2024-02-19 18:42:41

踩

烟火html代码


<p>这是一段简单的 HTML 烟花代码：</p>
<p>```html
<!DOCTYPE html> </p>
<html> 
<head> 
<title>烟花效果</title> 
</head> 
<body> 
<div id="fireworks"></div> 
<script> 
    var c = document.getElementById("fireworks"); 
    var ctx = c.getContext("2d"); 
    var particles = []; 
    var amount = 0; 
    var mouse = {x:0,y:0}; 
    var colors = ["#f44336","#e91e63","#9c27b0","#3f51b5","#03a9f4","#009688","#8bc34a","#cddc39","#ffeb3b","#ffc107","#ff9800","#ff5722"]; 
    c.width = window.innerWidth; 
    c.height = window.innerHeight; 
    document.onmousemove = function(e){ 
        mouse.x = e.clientX || e.pageX; 
        mouse.y = e.clientY || e.pageY; 
    } 
    function Particle(){ 
        this.x = mouse.x; 
        this.y = mouse.y; 
        this.vx = Math.random()*10-5; 
        this.vy = Math.random()*10-5; 
        this.radius = Math.random()*20+10; 
        this.color = colors[Math.floor(Math.random()*colors.length)]; 
        this.life = 0; 
        this.maxLife = Math.random()*80+20; 
    } 
    Particle.prototype.draw = function(){ 
        this.x += this.vx; 
        this.y += this.vy; 
        if(Math.random() < 0.1){ 
            this.vx = Math.random()*10-5; 
            this.vy = Math.random()*10-5; 
        } 
        this.life++; 
        if(this.life >= this.maxLife){ 
            particles[particles.indexOf(this)] = new Particle(); 
        } 
        ctx.beginPath(); 
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2); 
        ctx.fillStyle = this.color; 
        ctx.fill(); 
    } 
    function loop(){ 
        requestAnimationFrame(loop); 
        ctx.clearRect(0,0,c.width,c.height); 
        for(var i = 0; i < amount; i++){ 
            particles[i].draw(); 
        } 
    } 
    function init(){ 
        for(var i = 0; i < 150; i++){ 
            particles.push(new Particle()); 
        } 
        amount = particles.length; 
    } 
    init(); 
    loop(); 
</script> 
</

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/116295