封装一个模仿知乎登录背景的面向对象代码

我已经将其封装，就不写教程了，使用如下：
参数：

options={
    canvasContainerID:运用背景的盒子的ID名，默认为“canvas-container”,
    canvasOpacity:canvas背景的透明度，默认为0.8,
    circleNum:页面中随机产生的圆点的数量，默认为40,
    circleColor:页面的颜色，可接受rgb、rgba、十六进制、关键字形式，默认为rgba(180,180,180,1),
    lineColor:线条的颜色，只接受rgba形式，默认为rgba(180,180,180,1),
    circleMovemaxX:圆点每次X轴移动最大的距离，整数为向右移动，负数为向左移动，默认为2,
    circleMoveminX:圆点每次X轴移动最小的距离，整数为向右移动，负数为向左移动，默认为-2,
    circleMovemaxY:圆点每次Y轴移动最大的距离，整数为向下移动，负数为向上移动，默认为2,
    circleMoveminY:圆点每次Y轴移动最小的距离，整数为向下移动，负数为向上移动，默认为-2,
    canvasWidth:canvas背景的宽度，默认为整个窗口可视区宽度,
    canvasHeight:canvas背景的高度，默认为整个窗口可视区高度,
}

使用方法：直接实例化，将参数提供即可，不提供参数将使用默认参数，如 ：

var bg=new LogBackground({
      canvasContainerID:"mycanvas"
})

原生js版源代码如下：

function LogBackground(opt){
        this.init(opt);
    }
    LogBackground.prototype.init=function(opt){
        var self=this;
        self._initDom(opt);
        self.canvas.width=this.options.canvasWidth;
        self.canvas.height=this.options.canvasHeight;
        self._initCir(self.context);
        self.render();
    }
    LogBackground.prototype._initDom=function(opt){
        this.options={
            canvasContainerID:"canvas-container",
            canvasOpacity:0.8,
            circleNum:40,
            circleColor:"rgba(180,180,180,1)",
            lineColor:"rgba(180,180,180,1)",
            circleMovemaxX:2,
            circleMoveminX:-2,
            circleMovemaxY:2,
            circleMoveminY:-2,
            canvasWidth:document.documentElement.clientWidth||document.body.Width,
            canvasHeight:document.documentElement.clientHeight||document.body.client
        }
        if(opt){
            for(var key in opt){
                this.options[key]=opt[key];
            }
        }
        var canvasEle=document.createElement("canvas");
        var canvasContainer=document.getElementById(this.options.canvasContainerID);
        canvasContainer.appendChild(canvasEle);
        canvasContainer.style.position="relative";
        canvasEle.style.cssText="z-index:-20;position:absolute;left:0;top:0";
        canvasEle.style.opacity=this.options.canvasOpacity;
        this.canvas=canvasEle;
        this.drawMaxWidth=this.options.canvasWidth+30;
        this.drawMinWidth=-30;
        this.drawMaxHeight=this.options.canvasHeight+30;
        this.drawMinHeight=-30;
        this.context=this.canvas.getContext("2d");
        this.circleArr=[];
        this.moveArr=[];
    }
    LogBackground.prototype.random=function(max,_min){
        var minNum=arguments[1]||0;
        return Math.floor(Math.random()*(max-minNum+1)+minNum);
    }
    LogBackground.prototype._initCir=function(context){
        var self=this;
        for(var i=0;i<self.options.circleNum;i++){
            x=self.random(self.drawMaxWidth,self.drawMinWidth);
            y=self.random(self.drawMaxHeight,self.drawMinHeight);
            r=self.random(10);
            var newCircle=self.drawCircle(context,x,y,r);
            self.circleArr.push(newCircle);
            var move={
                x:Math.random()*(self.options.circleMovemaxX-self.options.circleMoveminX)+self.options.circleMoveminX,
                y:Math.random()*(self.options.circleMovemaxY-self.options.circleMoveminY)+self.options.circleMoveminY
            }
            self.moveArr.push(move);
        }
    }
    LogBackground.prototype._initLine=function(ctx,bx,by,cx,cy,opacity){
        var self=this;
        function Line(bx,by,cx,cy){
            this.beginX=bx;
            this.beginY=by;
            this.closeX=cx;
            this.closeY=cy;
        }
        var line=new Line(bx,by,cx,cy);
            ctx.beginPath();
            ctx.moveTo(line.beginX,line.beginY);
            ctx.lineTo(line.closeX,line.closeY);
            ctx.stroke();
            var colorArr=self.options.lineColor.split(",");
            ctx.strokeStyle=colorArr[0]+","+colorArr[1]+","+colorArr[2]+","+opacity+")";
            ctx.closePath();

    }
    LogBackground.prototype.render=function(){
        var self=this;
        self.context.clearRect(0,0,self.options.canvasWidth,self.options.canvasHeight);
            for(var i=0;i<40;i++){
                var changeCircle=self.circleArr[i];
                changeCircle.centerX+=self.moveArr[i].x;
                changeCircle.centerY+=self.moveArr[i].y;
                self.drawCircle(self.context,changeCircle.centerX,changeCircle.centerY,changeCircle.radius);
                if(changeCircle.centerX<self.drawMinWidth){
                    changeCircle.centerX=self.drawMaxWidth;
                    changeCircle.centerY=self.random(self.drawMaxHeight,self.drawMinHeight);
                }else if(changeCircle.centerX>self.drawMaxWidth){
                    changeCircle.centerX=self.drawMinWidth;
                    changeCircle.centerY=self.random(self.drawMaxHeight,self.drawMinHeight);
                }else if(changeCircle.centerY<self.drawMinHeight){
                    changeCircle.centerY=self.random(self.drawMaxWidth,self.drawMinWidth);
                    changeCircle.centerY=self.drawMaxHeight;
                }else if(changeCircle.centerY>self.drawMaxHeight){
                    changeCircle.centerY=self.random(self.drawMaxWidth,self.drawMinWidth);
                    changeCircle.centerY=self.drawMinWidth;
                }
                
            }
            for(var j=0;j<40;j++){
                for(var k=0;k<40;k++){
                    var bx=self.circleArr[j].centerX;
                    var by=self.circleArr[j].centerY;
                    var cx=self.circleArr[k].centerX;
                    var cy=self.circleArr[k].centerY;
                    var dis=Math.sqrt(Math.abs(cx-bx)*Math.abs(cx-bx)+Math.abs(by-cy)*Math.abs(by-cy));
                    if(dis<0.3*this.options.canvasWidth||dis>this.options.canvasWidth*1.2){
                    var lineOpacity=1;
                    lineOpacity=lineOpacity>0.3?0.3:lineOpacity;
                    self._initLine(self.context,bx,by,cx,cy,lineOpacity);
                    }
                }
            }
        var timer=setTimeout(function(){
            self.render();
        },30);
    }
    LogBackground.prototype.drawCircle=function(ctx,x,y,r){
        var self=this;
        function Circle(x,y,r){
            this.centerX=x;
            this.centerY=y;
            this.radius=r;
        }
        var circle=new Circle(x,y,r);
        ctx.beginPath();
        ctx.arc(circle.centerX,circle.centerY,circle.radius,0,Math.PI*2,true);
        ctx.fillStyle=self.options.circleColor;
        ctx.fill();
        ctx.closePath();
        return circle;
    }

jquery版源代码如下：

function LogBackground(opt){
        this.init(opt);
    }
    $.extend(LogBackground.prototype,{
        init:function(opt){
            var self=this;
            self.options={
                canvasContainerID:"#canvas-container",
                canvasOpacity:0.8,
                circleNum:40,
                circleColor:"rgba(180,180,180,1)",
                lineColor:"rgba(180,180,180,1)",
                circleMovemaxX:2,
                circleMoveminX:-2,
                circleMovemaxY:2,
                circleMoveminY:-2,
                canvasWidth:$(window).width(),
                canvasHeight:$(window).height()
            }
            $.extend(true,self.options,opt||{});
            self._initDom();
            self.canvas.width=this.options.canvasWidth;
            self.canvas.height=this.options.canvasHeight;
            self._initCir(self.context);
            self.render();
        },
        _initDom:function(){
            var self=this;
            var $canvas=$("<canvas></canvas>")
            $(self.options.canvasContainerID).append($canvas);
            $canvas.css({"z-index":"-20","position":"absolute","left":0,"top":0,"opacity":self.options.canvasOpacity});
            this.canvas=$canvas[0];
            this.drawMaxWidth=this.options.canvasWidth+30;
            this.drawMinWidth=-30;
            this.drawMaxHeight=this.options.canvasHeight+30;
            this.drawMinHeight=-30;
            this.context=this.canvas.getContext("2d");
            this.circleArr=[];
            this.moveArr=[];
        },
        random:function(max,_min){
            var minNum=arguments[1]||0;
            return Math.floor(Math.random()*(max-minNum+1)+minNum);
        },
        _initCir:function(context){
            var self=this;
            for(var i=0;i<self.options.circleNum;i++){
                x=self.random(self.drawMaxWidth,self.drawMinWidth);
                y=self.random(self.drawMaxHeight,self.drawMinHeight);
                r=self.random(10);
                var newCircle=self.drawCircle(context,x,y,r);
                self.circleArr.push(newCircle);
                var move={
                    x:Math.random()*(self.options.circleMovemaxX-self.options.circleMoveminX)+self.options.circleMoveminX,
                    y:Math.random()*(self.options.circleMovemaxY-self.options.circleMoveminY)+self.options.circleMoveminY
                }
                self.moveArr.push(move);
            }
        },
        _initLine:function(ctx,bx,by,cx,cy,opacity){
            var self=this;
            function Line(bx,by,cx,cy){
                this.beginX=bx;
                this.beginY=by;
                this.closeX=cx;
                this.closeY=cy;
            }
            var line=new Line(bx,by,cx,cy);
            ctx.beginPath();
            ctx.moveTo(line.beginX,line.beginY);
            ctx.lineTo(line.closeX,line.closeY);
            ctx.stroke();
            var colorArr=self.options.lineColor.split(",");
            ctx.strokeStyle=colorArr[0]+","+colorArr[1]+","+colorArr[2]+","+opacity+")";
            ctx.closePath();
        },
        render:function(){
            var self=this;
            self.context.clearRect(0,0,self.options.canvasWidth,self.options.canvasHeight);
            for(var i=0;i<40;i++){
                var changeCircle=self.circleArr[i];
                changeCircle.centerX+=self.moveArr[i].x;
                changeCircle.centerY+=self.moveArr[i].y;
                self.drawCircle(self.context,changeCircle.centerX,changeCircle.centerY,changeCircle.radius);
                if(changeCircle.centerX<self.drawMinWidth){
                    changeCircle.centerX=self.drawMaxWidth;
                    changeCircle.centerY=self.random(self.drawMaxHeight,self.drawMinHeight);
                }else if(changeCircle.centerX>self.drawMaxWidth){
                    changeCircle.centerX=self.drawMinWidth;
                    changeCircle.centerY=self.random(self.drawMaxHeight,self.drawMinHeight);
                }else if(changeCircle.centerY<self.drawMinHeight){
                    changeCircle.centerY=self.random(self.drawMaxWidth,self.drawMinWidth);
                    changeCircle.centerY=self.drawMaxHeight;
                }else if(changeCircle.centerY>self.drawMaxHeight){
                    changeCircle.centerY=self.random(self.drawMaxWidth,self.drawMinWidth);
                    changeCircle.centerY=self.drawMinWidth;
                }
                
            }
            for(var j=0;j<40;j++){
                for(var k=0;k<40;k++){
                    var bx=self.circleArr[j].centerX;
                    var by=self.circleArr[j].centerY;
                    var cx=self.circleArr[k].centerX;
                    var cy=self.circleArr[k].centerY;
                    var dis=Math.sqrt(Math.abs(cx-bx)*Math.abs(cx-bx)+Math.abs(by-cy)*Math.abs(by-cy));
                    if(dis<0.3*this.options.canvasWidth||dis>this.options.canvasWidth*1.2){
                    var lineOpacity=1;
                    lineOpacity=lineOpacity>0.3?0.3:lineOpacity;
                    self._initLine(self.context,bx,by,cx,cy,lineOpacity);
                    }
                }
            }
            var timer=setTimeout(function(){
                self.render();
            },30);
        },
        drawCircle:function(ctx,x,y,r){
            var self=this;
            function Circle(x,y,r){
                this.centerX=x;
                this.centerY=y;
                this.radius=r;
            }
            var circle=new Circle(x,y,r);
            ctx.beginPath();
            ctx.arc(circle.centerX,circle.centerY,circle.radius,0,Math.PI*2,true);
            ctx.fillStyle=self.options.circleColor;
            ctx.fill();
            ctx.closePath();
            return circle;
        }
    });

hope登录页使用默认参数效果如下：

传入部分参数如下：

var bg=new LogBackground({
    circleColor:"rgba(49,210,142,0.8)",
    lineColor:"rgba(49,210,142,1)",
    canvasOpacity:0.2
    });

效果如下：