前言

打开知乎的登录页，就可以看到其背景有一个动效，看起来好像蛮不错的样子：

这个效果使用canvas是不难实现的，接下来就一步一步地讲解并实现这个效果。

分析

在动工之前先分析这个效果到底是如何运动的。首先要理解的是虽然看起来好像所有线和圆都在运动，但实际上只有圆才是在运动的，而线只不过是把满足一定条件的任意两个圆连接在一起。那么接下来就分析圆是怎么运动的，从效果看，每个圆都是在做匀速直线运动，而且运动方向不一，通过物理相关知识可以得知，每一个圆在水平方向和垂直方向都有一个速度。最后是当圆运动出画布任一边界的时候，这个圆会从出边界的这条边的对边再次进入画布。把这三个关键点理解清楚了就清晰很多了。

实践

先创建一个canvas画布：

// 这里就简单地设置下背景色
body >
    
 canvas id="canvas" >
    /canvas>
    
/body>
    

接着先获取canvas的上下文环境并设置一些共用的属性

var canvas = document.getElementById("canvas");
    
var context = canvas.getContext("2d");
    

canvas.width = document.documentElement.clientWidth;
    
canvas.height = document.documentElement.clientHeight;
    

context.fillStyle = "rgba(0, 0, 0, 0.08)";
    
context.strokeStyle = "rgba(0, 0, 0, 0.05)";
    
context.lineWidth = 0.5;
    

接下来绘制圆，那么绘制圆需要圆的圆心坐标，半径，水平方向的速度，垂直方向的速度，并且这些信息要满足一定的条件，通过一个函数来创建：

// 存放所有圆的数组，这里用balls
var balls = [];

function createBall() {
    
 // x坐标
 var _x = Math.random() * canvas.width;
    
 // y坐标
 var _y = Math.random() * canvas.height;
    
 // 半径 [0.01, 15.01]
 var _r = Math.random() * 15 + 0.01;
    
 // 水平速度 [±0.0, ±0.5]
 var _vx = Math.random() * 0.5 * Math.pow( -1, Math.floor(Math.random() * 2 + 1) );
    
 // 垂直速度 [±0.0, ±0.5]
 var _vy = Math.random() * 0.5 * Math.pow( -1, Math.floor(Math.random() * 2 + 1) );

 // 把每一个圆的信息存放到数组中
 balls.push({

 x: _x,
 y: _y,
 r: _r,
 vx: _vx,
 vy: _vy
 }
    );

}
    

然后根据自己的情况选择需要绘制多少个圆，这里我假设有20个，看起来舒服一点：

// 圆的数量
var num = 20;
    
for(var i = 0;
     i  num;
 i++) {
    
 createBall();

}
    

现在圆的信息都有了，下一步就是绘制每一帧的圆和线，创建一个render函数，然后在函数内先绘制所有的圆出来：

for(var k = 0;
     k  num;
 k++) {
    
 context.save();
    
 context.beginPath();
    
 context.arc( balls[k].x, balls[k].y, balls[k].r, 0, Math.PI*2 );
    
 context.fill();
    
 context.restore();

}
    

接着要遍历每两个圆的圆心之间的距离是否小于某个临界值（比如500），满足则将这两个圆的圆心连接起来：

for(var i = 0;
     i  num;
 i++) {
    
 for(var j = i + 1;
     j  num;
 j++) {

 if( distance( balls[i], balls[j] )  500 ) {
    
  context.beginPath();
    
  context.moveTo( balls[i].x, balls[i].y );
    
  context.lineTo( balls[j].x, balls[j].y );
    
  context.stroke();

 }

 }

}

这里的 distance 函数就是计算两点之间的距离：

function distance(point1, point2) {
    
 return Math.sqrt( Math.pow( (point1.x - point2.x), 2 ) + Math.pow( (point1.y - point2.y), 2 ) );

}
    

还有一步就是判断圆是否超出了边界值，若满足条件则从对边再次进来：

for(var k = 0;
     k  num;
 k++) {
    
 balls[k].x += balls[k].vx;
    
 balls[k].y += balls[k].vy;
    

 if( balls[k].x - balls[k].r >
 canvas.width ) {
    
 balls[k].x = 0 - balls[k].r;

 }

 if( balls[k].x + balls[k].r  0 ) {
    
 balls[k].x = canvas.width + balls[k].r;

 }
    
 if( balls[k].y - balls[k].r >
 canvas.height ) {
    
 balls[k].y = 0 - balls[k].r;

 }

 if( balls[k].y + balls[k].r  0 ) {
    
 balls[k].y = canvas.height + balls[k].r;

 }

}
    

当然如果想简单点，只要圆超出就移除并重新生成一个圆即可：

if( balls[k].x - balls[k].r >
     canvas.width || 
 balls[k].x + balls[k].r  0 || 
 balls[k].y - balls[k].r >
 canvas.height || 
 balls[k].y + balls[k].r  0) {
    
 balls.splice(k, 1);
    
 createBall();

}

这样每一帧绘制的细节就完成了，最后一步就是让圆都运动起来：

(function loop(){
    
 render();
    
 requestAnimationFrame(loop);

}
    )();
    

到此，整个效果就出来了。当然这里面有很多细节可以自己琢磨琢磨，让这个效果变得更加细腻多彩。希望对新手有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！