写一段html烟花代码

最新推荐文章于 2024-07-25 11:52:08 发布

八位数花园

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量430

点赞数

文章标签： html javascript 前端开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_35756130/article/details/129083812

版权

<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> 
</

八位数花园

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
写一段html烟花代码

<p>这是一段简单的 HTML 烟花代码：</p><p>```html<!DOCTYPE html> </p><html> <head> <title>烟花效果</title> </head> <body> <div id="fireworks"...
复制链接

扫一扫