手写particles

Posted 2020-10-09 Grewer

 var canvas = document.getElementById(‘canvas‘);
    var ctx = canvas.getContext(‘2d‘);

    var Grewer = {
        init: function() {
            this.getWindowSize();
            canvas.width = this.w;
            canvas.height = this.h;
            this.num = 50;
            this.range = 100;
            this.arr = [];
            this.add();

        },
        getWindowSize: function() {
            //获取窗口宽度
            if (window.innerWidth) { //兼容火狐，谷歌,safari等浏览器
                this.w = window.innerWidth;
            } else if ((document.body) && (document.body.clientWidth)) { //兼容IE浏览器
                this.w = document.body.clientWidth;
            }

            //获取窗口高度
            if (window.innerHeight) {
                this.h = window.innerHeight;
            } else if ((document.body) && (document.body.clientHeight)) {
                this.h = document.body.clientHeight;
            }
        },
        update: function(obj) {
            obj.x += obj.vx;
            obj.y += obj.vy;

            if (obj.x < 0 || obj.x > this.w) {
                obj.vx *= -1;
            }
            if (obj.y < 0 || obj.y > this.h) {
                obj.vy *= -1;
            }
        },
        add: function() {

            var i = this.num;
            while (i--) {
                var particles = {
                    x: (Math.random() * this.w) | 0,
                    y: (Math.random() * this.h) | 0,
                    vx: (Math.random() - .5) * 1,
                    vy: (Math.random() - .5) * 1,
                }
                this.arr.push(particles);
            }
        },
        checkDist: function(a, b, dist) {
            var x = a.x - b.x,
                y = a.y - b.y;

            return x * x + y * y <= dist * dist;
        },
        print: function(obj) {
            ctx.beginPath();
            ctx.arc(obj.x, obj.y, 2, 0, 2 * Math.PI);
            ctx.fillStyle = ‘#ddd‘;
            ctx.fill();
        }


    }
    var G = Object.create(Grewer);
    G.init();
    var Ganim = function() {
        window.requestAnimationFrame(Ganim);

        ctx.fillStyle = ‘#fff‘;
        ctx.fillRect(0, 0, G.w, G.h);

        var length = G.num;
        for (var i = 0; i < length; i++) {
            var o1 = G.arr[i]
            G.update(o1);
            G.print(o1);

            for (var j = i + 1; j < length; ++j) {

                var o2 = G.arr[j];
                if (G.checkDist(o1, o2, G.range)) {
                    ctx.strokeStyle = ‘#ddd‘;
                    ctx.beginPath();
                    ctx.moveTo(o1.x, o1.y);
                    ctx.lineTo(o2.x, o2.y);
                    ctx.stroke();
                }
            }

        }
    }
    Ganim();

 也可以全屏观看:http://en.jsrun.net/nWiKp/show