很久之前无意看到知乎登录页的效果，今日想熟悉一下就顺便实现了一下 顺便加了一些颜色和渐变。

这是预览地址

https://www.aparesse.com/demo

这是效果

效果图

代码

            _can  : document.getElementById("canvas"),
            Scale : window.devicePixelRatio,

            init: function(){
                this.options = {
                    ctx          : this._can.getContext('2d'),
                    width        : document.body.offsetWidth,
                    height       : document.body.offsetHeight,
                    arcArray     : [],
                    begin        : 0,
                    length       : 200,
                    grad         : ''
                }
                this._can.style.width = this.options.width + "px";
                this._can.style.height = this.options.height + "px";
                this._can.width = this.options.width * canvas.Scale;
                this._can.height = this.options.height * canvas.Scale;
                this._can.style.background = '#000';
                this.dropArc();

            },

这是设置初始参数，scale 主要是为了解决，不同设备分辨率下 canvas图像模糊的问题，没有封装所以在后面就很low的乘了一下。勿喷，勿喷。。。

紧接着 我们开始随机生成200个圆点

dropArc: function(){

                var options;

                for( var i = 0; i < this.options.length; i++ ){

                  options = {
                      opacity: Math.random().toFixed(1),
                      r: 5 * canvas.Scale,
                      X: Math.floor(Math.random() * this._can.width),
                      Y: Math.floor(Math.random() * this._can.height),
                      R: Math.floor(Math.random() * 256) * canvas.Scale,
                      G: Math.floor(Math.random() * 256) * canvas.Scale,
                      B: Math.floor(Math.random() * 256) * canvas.Scale,
                      moveX : Math.random() > 0.5 ? parseFloat(parseInt((Math.random()*6+5))/10) : parseFloat( '-' + parseFloat(parseInt((Math.random()*6+5))/10)),
                      moveY : Math.random() > 0.5 ? parseFloat(parseInt((Math.random()*6+5))/10) : parseFloat( '-' + parseFloat(parseInt((Math.random()*6+5))/10))
                  }

                  this.options.ctx.beginPath();
                  this.options.ctx.arc(options.X,options.Y,options.r,0,2*Math.PI);
                  this.options.ctx.fillStyle = "rgba(" + options.R + "," + options.G + "," + options.B + "," + options.opacity + ")";
                  this.options.ctx.fill();
                  this.options.ctx.closePath();

                  this.options.arcArray.push(options);

                }

                this.drawFrame();
                // this.moveArc();
            },

其中options是代表每一个圆的参数，它包含了圆的坐标半径透明度颜色等等 还有移动的方向

随机生成圆成功了以后就开始要移动这些圆了

moveArc: function(){

                var mx = my = '';

                for( var i = 0; i < this.options.arcArray.length; i++ ){

                    this.options.arcArray[i].X += this.options.arcArray[i].moveX;
                    this.options.arcArray[i].Y += this.options.arcArray[i].moveY;

                    if( this.options.arcArray[i].Y + this.options.arcArray[i].r > this._can.height || this.options.arcArray[i].Y - this.options.arcArray[i].r < 0){
                        this.options.arcArray[i].moveY = -this.options.arcArray[i].moveY;
                    }
                    if( this.options.arcArray[i].X + this.options.arcArray[i].r > this._can.width || this.options.arcArray[i].X - this.options.arcArray[i].r < 0 ){
                        this.options.arcArray[i].moveX = -this.options.arcArray[i].moveX;
                    }

                    this.options.ctx.beginPath();
                    this.options.ctx.arc(this.options.arcArray[i].X,this.options.arcArray[i].Y,this.options.arcArray[i].r,0,2*Math.PI);
                    this.options.ctx.fillStyle = "rgba(" + this.options.arcArray[i].R + "," + this.options.arcArray[i].G + "," + this.options.arcArray[i].B + "," + this.options.arcArray[i].opacity + ")";
                    this.options.ctx.fill();
                    this.options.ctx.closePath();

                    for(var j = i + 1; j < this.options.arcArray.length; j++) {
                        if( this.distance( this.options.arcArray[i], this.options.arcArray[j] ) < 200 ) {
                            this.options.ctx.beginPath();
                            this.options.grad  = this.options.ctx.createLinearGradient(this.options.arcArray[i].X,this.options.arcArray[i].Y, this.options.arcArray[j].X,this.options.arcArray[j].Y);
                            this.options.grad.addColorStop(0,"rgba(" + this.options.arcArray[i].R + "," + this.options.arcArray[i].G + "," + this.options.arcArray[i].B + "," + this.options.arcArray[i].opacity + ")");
                            this.options.grad.addColorStop(1,"rgba(" + this.options.arcArray[j].R + "," + this.options.arcArray[j].G + "," + this.options.arcArray[j].B + "," + this.options.arcArray[i].opacity + ")"); // 绿
                            this.options.ctx.moveTo( this.options.arcArray[i].X, this.options.arcArray[i].Y );
                            this.options.ctx.lineTo( this.options.arcArray[j].X, this.options.arcArray[j].Y );
                            this.options.ctx.strokeStyle = this.options.grad;
                            this.options.ctx.lineWidth = this.Scale;
                            this.options.ctx.stroke();
                            this.options.ctx.closePath();
                        }
                    }
                }

            },

这段代码比较长，主要是因为我没有精简变量名，所以大家仔细看下还是很容易懂我的思路的

最后就是不断地刷新帧效果就结束了。

drawFrame:function(){

                canvas.options.ctx.clearRect(0, 0, canvas.options.width * canvas.Scale, canvas.options.height * canvas.Scale);
                window.requestAnimationFrame(canvas.drawFrame);
                canvas.moveArc();

            }

想看效果的童鞋可以直接访问上面预览的页面 ，右键查看源代码就有所有的效果啦！如果打不开可以留言联系我！