仿知乎粒子动画背景

image.png

在项目中，遇见的一个功能是做搜索任务，页面初始全局仅一个搜索框在正中间，才想到要用粒子光效背景来稍微点缀一下，在网上找到的其他方法，再融合一下。

全局代码如下：
html

<canvas id="bg"></canvas>

js

<script>
    initBg();
    function initBg(){
        var WIDTH = window.innerWidth,HEIGHT = window.innerHeight,POINT = 35;//界面上点的个数
        var canvas = document.getElementById("bg");
        canvas.width = WIDTH;
        canvas.height = HEIGHT;
        var context = canvas.getContext("2d");
        context.strokeStyle = "rgba(33,133,208,0.8)";
        context.strokeWidth = 1;
        context.fillStyle = "rgba(33,133,208,0.2)";
        var circleArr = [];
        var Line = function(x,y,_x,_y,o){
            this.beginX = x;
            this.beginY = y;
            this.closeX = _x;
            this.closeY = _y;
            this.o = o;
        };
        var Circle = function(x,y,r,moveX,moveY){
            this.x = x;
            this.y = y;
            this.r = r;
            this.moveX = moveX;
            this.moveY = moveY;
        };
        var num = function(max,_min){
            var min = arguments[1]||0;
            return Math.floor(Math.random()*(max-min+1)+min);
        };
        var drawCircle = function(ctx,x,y,r,moveX,moveY){
            var circle = new Circle(x,y,r,moveX,moveY);
            ctx.beginPath();
            ctx.arc(circle.x,circle.y,circle.r,0,2*Math.PI);
            ctx.closePath();
            ctx.fill();
            return circle;
        };
        var drawLine = function(ctx,x,y,_x,_y,o){
            var line = new Line(x,y,_x,_y,o);
            ctx.beginPath();
            ctx.strokeStyle = "rgba(33,133,208,"+o+")";
            ctx.moveTo(line.beginX,line.beginY);
            ctx.lineTo(line.closeX,line.closeY);
            ctx.closePath();
            ctx.stroke();
        };
        var draw = function(){
            context.clearRect(0,0,canvas.width,canvas.height);
            for(var i = 0;i < POINT;i++){
                drawCircle(context,circleArr[i].x,circleArr[i].y,circleArr[i].r);
            }
            for(var i = 0;i <  POINT;i++){
                for(var j = 0;j < POINT;j++){
                    if(i + j < POINT){
                        var A = Math.abs(circleArr[i+j].x - circleArr[i].x);
                        var B = Math.abs(circleArr[i+j].y - circleArr[i].y);
                        var lineLength = Math.sqrt(A*A + B*B);
                        var C = 1/lineLength*7-0.009;
                        var lineOpacity = C > 0.3?0.3:C;
                        if(lineOpacity > 0){
                            drawLine(context,circleArr[i].x,circleArr[i].y,circleArr[i+j].x,circleArr[i+j].y,lineOpacity);
                        }
                    }
                }
            }
        };
        var init = function(){
            circleArr = [];
            for(var i = 0;i < POINT;i++){
                circleArr.push(drawCircle(context,num(WIDTH),num(HEIGHT),num(15,2),num(10,-10)/40,num(10,-10)/40));
            }
            draw();
        };
        init();
        var interval = setInterval(function(){
            for(var i = 0;i < POINT;i++){
                var cir = circleArr[i];
                cir.x += cir.moveX;
                cir.y += cir.moveY;
                if(cir.x > WIDTH) cir.x = 0;
                else if(cir.x < 0) cir.x = WIDTH;
                if(cir.y > HEIGHT) cir.y = 0;
                else if(cir.y < 0) cir.y = HEIGHT;
            }
            draw();
        });
    }
</script>