很久之前无意看到知乎登录页的效果，今日想熟悉一下就顺便实现了一下 顺便加了一些颜色和渐变。
这是预览地址
这是效果
效果图
代码
_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();
}
想看效果的童鞋可以直接访问上面预览的页面 ，右键查看源代码就有所有的效果啦！如果打不开可以留言联系我！
