canvas实现鼠标跟随火焰（js）

最新推荐文章于 2025-05-23 07:00:00 发布

原创最新推荐文章于 2025-05-23 07:00:00 发布 · 677 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#canvas移动动画

HTML5 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一个使用HTML5 canvas和JavaScript实现的动态火焰效果，火焰会跟随鼠标的移动而变化，通过创建多个粒子并不断更新其位置和透明度，形成燃烧的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果展示：

源码展示：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>canvas实现鼠标跟随火焰（js）</title>

    <style>
        #myCanvas {
            position:absolute;
            left:0px;
            top:0px;
        }
    </style>
</head>
<body>
<canvas id="myCanvas">
    更新浏览器
</canvas>

<script>
    function aa() {
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");

        var W = window.innerWidth,
            H = window.innerHeight;
        canvas.width = W;
        canvas.height = H;

        var particles = [];
        var mouse = {};


        var particle_count = 50;
        for (var i = 0; i < particle_count; i++) {
            particles.push(new particle());
        }


        canvas.addEventListener('mousemove', track_mouse, false);

        function track_mouse(e) {

            mouse.x = e.pageX;
            mouse.y = e.pageY;
        }

        function particle() {
            this.speed = {
                x: -2.5 + Math.random() * 5,
                y: -15 + Math.random() * 10
            };

            if (mouse.x && mouse.y) {
                this.location = {
                    x: mouse.x,
                    y: mouse.y
                };
            } else {
                this.location = {
                    x: W / 2,
                    y: H / 2
                };
            }
            //radius range = 10-30
            this.radius = 10 + Math.random() * 20;
            //life range = 20-30
            this.life = 20 + Math.random() * 10;
            this.remaining_life = this.life;
            //colors
            this.r = Math.round(Math.random() * 255);
            this.g = Math.round(Math.random() * 255);
            this.b = Math.round(Math.random() * 255);
        }

        function draw() {
            ctx.globalCompositeOperation = "source-over";
            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, W, H);
            ctx.globalCompositeOperation = "lighter";

            for (var i = 0; i < particles.length; i++) {
                var p = particles[i];
                ctx.beginPath();
             
                p.opacity = Math.round(p.remaining_life / p.life * 100) / 100
       
                var gradient = ctx.createRadialGradient(p.location.x, p.location.y, 0, p.location.x, p.location.y, p.radius);
                gradient.addColorStop(0, "rgba(" + p.r + ", " + p.g + ", " + p.b + ", " + p.opacity + ")");
                gradient.addColorStop(0.5, "rgba(" + p.r + ", " + p.g + ", " + p.b + ", " + p.opacity + ")");
                gradient.addColorStop(1, "rgba(" + p.r + ", " + p.g + ", " + p.b + ", 0)");
                ctx.fillStyle = gradient;
                ctx.arc(p.location.x, p.location.y, p.radius, Math.PI * 2, false);
                ctx.fill();

  
                p.remaining_life--;
                p.radius--;
                p.location.x += p.speed.x;
                p.location.y += p.speed.y;
                
                if (p.remaining_life < 0 || p.radius < 0) {
                    particles[i] = new particle();

                }
            }
        }

        setInterval(draw, 30);
    }
    aa();
</script>

</body>
</html>