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();