canvas实现跟随鼠标和跟随手指粒子特效

妖狐艹你老母 2022-05-22 02:55 222阅读 0赞

原文出处： [https://blog.csdn.net/IForDreams/article/details/75453450][https_blog.csdn.net_IForDreams_article_details_75453450]  
效果图：  
![20180613155808633][]  
代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>粒子跟随特效</title>
        <style>
            *
            {
                margin: 0;
                padding: 0;
            }
    
            body
            {
                overflow: hidden;
                background: #000;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <script>
            var canvas = document.getElementById("canvas");
            canvas.width = document.documentElement.clientWidth;
            canvas.height = document.documentElement.clientHeight;
            var ctx = canvas.getContext("2d");
            var flag = false;       //启动的标志
            var particles = [];     //粒子数组
            var color = ['white', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple'];
    　      // 实现动画方法　　　
            animate();
            function animate() {
                setInterval(function () {
                    render();           // 渲染particles中的粒子
                    area();             // 删除particles中微小的粒子
                }, 1000 / 60)　　　　　　// 相当于：60帧 / 1秒 
            }
    
            // 鼠标处理
            canvas.onmousedown = function (event) {
                var e = event || window.event;
                flag = true;
                do_spawn(e, 35 * Math.random() + 35);
            };
            canvas.onmouseup = function () {
                flag = false;
            };
            canvas.onmouseout = function () {
                flag = false;
            };
            canvas.onmousemove = function (event) {
                var e = event || window.event;
                if (flag) {
                    do_spawn(e, 9);
                }
            };
    
            // 手势处理
            canvas.ontouchstart = function (e) {
                flag = true;
                do_spawn(e, 35 * Math.random() + 35);
            };
            canvas.ontouchend = function (e) {
                flag = false;
            };
            canvas.ontouchmove = function (e) {
                if (flag) {
                    do_spawn(e, 9);
                }
            };
    
            function do_spawn(e, n) {   //设置孵化器的生产数量
                var x = e.clientX || e.touches[0].pageX;  //鼠标坐标||移动端触摸坐标
                var y = e.clientY || e.touches[0].pageY;
                // 生成n个粒子
                for (var i = 0; i < n; i++) {
                    spawn(x, y);
                }
            }
    
            function spawn(x, y) {   //孵化器，生成一个原点对象
                var particle = new Particle();
                particle.init(x, y);
                particles.push(particle);
            }
    
            function render() {    //把生成的原点渲染出来
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                for (var i = 0, len = particles.length; i < len; i++) {
                    particles[i].draw();
                    particles[i].update();
                }
            }
    
            function area() {  //半径足够小的时候删除该点
                var n = 0;
                for (var i = 0, l = particles.length; i < l; i++) {
                    if (particles[i].r > 1) {
                        particles[n++] = particles[i];     // 将半径大于1，凑起来 
                    }
                }
    
                //删除>n(半径<1)的粒子, 最多保留700个 
                while (particles.length > Math.min(700, n)) {
                    particles.pop();
                }
            }
    
            function Particle() { }  //构造函数，小球原型
            Particle.prototype = {
                init: function (x, y) {  //初始化小球各项数据
                    this.x = x || 0.0;
                    this.y = y || 0.0;
                    this.r = 10 * Math.random() + 10 || 40;
                    this.color = color[~~(Math.random() * 8)];
                    this.theta = Math.random() * 2 * Math.PI;
                    this.R = Math.random() * 4 + 2;
                    this.vx = Math.cos(this.theta) * this.R;
                    this.vy = Math.sin(this.theta) * this.R;
                },
                draw: function () {    //画出一个球的方法
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
                    ctx.fillStyle = this.color;
                    ctx.fill();
                },
                update: function () {    //改变球的各项属性（位置、大小、颜色）的方法
                    this.x += this.vx;
                    this.y += this.vy;
                    this.vx += Math.cos(this.theta) * .1;
                    this.vy += Math.sin(this.theta) * .1;
                    this.vx *= .94;
                    this.vy *= .94;    //给速度设置一个衰减系数
                    this.r *= .92;     //园圈越来越小(衰减)
                    this.color = color[~~(Math.random() * 8)]; //动态改变圆点的颜色达到闪烁的效果
                }
            };
        </script>
    </body>
    </html>

[https_blog.csdn.net_IForDreams_article_details_75453450]: https://blog.csdn.net/IForDreams/article/details/75453450
[20180613155808633]: /images/20220522/a503f8dc1ed54dbcb20d2f742a5b9098.png