粒子向上持续瀑布动画效果(直接粘贴到记事本改html即可)

代码: 根据个人喜好修改即可

html 复制代码
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宽粒子向上效果</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: black;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="flameCanvas"></canvas>
    <script>
        const canvas = document.getElementById('flameCanvas');
        const ctx = canvas.getContext('2d');

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        class Particle {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.size = Math.random() * 10 + 5; // 粒子大小
                this.speedY = Math.random() * -4 - 2; // 向上速度
                this.speedX = (Math.random() - 0.5) * 2; // 水平随机速度
                this.color = `rgba(255, ${Math.floor(Math.random() * 100) + 155}, 0, 0.8)`; // 橙色
                this.friction = 0.98; // 摩擦力
            }

            update() {
                this.x += this.speedX;
                this.y += this.speedY;
                this.size *= this.friction; // 粒子逐渐变小

                if (this.size < 0.5) {
                    this.size = 0; // 粒子消失
                }
            }

            draw() {
                ctx.fillStyle = this.color;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fill();
            }
        }

        class Flame {
            constructor(x, width) {
                this.x = x;
                this.width = width;
                this.particles = [];
                this.particleCount = 40; // 每次生成的粒子数量
            }

            update() {
                // 生成新粒子
                for (let i = 0; i < this.particleCount; i++) {
                    const particleX = this.x + (Math.random() - 0.5) * this.width; // 生成在宽度范围内
                    this.particles.push(new Particle(particleX, canvas.height));
                }

                // 更新粒子位置
                this.particles.forEach((particle, index) => {
                    particle.update();
                    if (particle.size <= 0) {
                        this.particles.splice(index, 1); // 移除消失的粒子
                    }
                });
            }

            draw() {
                this.particles.forEach(particle => {
                    particle.draw();
                });
            }
        }

        const flames = [];
        const flameWidth = canvas.width * 0.6; // 宽度为屏幕的50%

        // 创建一束宽粒子
        flames.push(new Flame(canvas.width / 2, flameWidth));

        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            flames.forEach(flame => {
                flame.update();
                flame.draw();
            });
            requestAnimationFrame(animate);
        }

        animate();
    </script>
</body>
</html>
相关推荐
拉不动的猪44 分钟前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
烛阴1 小时前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中1 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
曹牧2 小时前
HTML字符实体和转义字符串
前端·html
鹿九巫2 小时前
【CSS】层叠,优先级与继承(四):层叠,优先级与继承的关系
前端·css
鱼樱前端3 小时前
前端必知必会:JavaScript 对象与数组克隆的 7 种姿势,从浅入深一网打尽!
前端·javascript
yzhSWJ3 小时前
Spring Boot中自定义404异常处理问题学习笔记
java·javascript
zyk_5205 小时前
前端渲染pdf文件解决方案-pdf.js
前端·javascript·pdf
沉迷...5 小时前
手动实现legend 与 echarts图交互 通过js事件实现图标某项的高亮 显示与隐藏
前端·javascript·echarts
HuaHua的世界6 小时前
说说 Vue 中 CSS scoped 的原理?
css·vue.js