前言

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

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

分析

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

实践

先创建一个canvas画布：

// 这里就简单地设置下背景色

<body style="background:#f7fafc;">

  <canvas id="canvas" style="width: 100%; height: 100%;"></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);

})();

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

若需转载，请注明出处，谢谢！

canvas-简单快速实现知乎登录页背景效果的更多相关文章

  1. CAS—改动默认登录页

    1.  部署CAS-Server 本文以cas-server-3.4.11-release.zip为例.解压提取cas-server-3.4.11/modules/cas-server-webapp- ...

  2. 用户未登录或Session超时时重定向到登录页,不那么简单

    在网站开发中,我们经常有这样的场景出现: 情景1:对未登录的用户或没有权限的用户,当其想访问某个受限网页时,系统要能够自动转到登录页面.   情景2:对于用session保存用户状态的情况还有这样一种 ...

  3. PlantUML —— 应用于 Eclipse 的简单快速的 UML 编辑软件

    PlantUML —— 应用于 Eclipse 的简单快速的 UML 编辑软件 简介: 在应用系统软件开发过程中,如果软件由很多对象组成,它的结构仅仅凭借分析很难理清,同时为了有利于软件的开发及重用, ...

  4. Spring Security笔记：自定义登录页

    以下内容参考了 http://www.mkyong.com/spring-security/spring-security-form-login-example/ 接上回,在前面的Hello Worl ...

  5. 【SSO单点系列】（2）：CAS4.0 登录页的个性化定制

    上一篇 [SSO单点系列](1):CAS环境的搭建介绍了CAS最简单环境的搭建,以及一个例子用来讲解CAS的一个最基础的用法. 今天主要是介绍如何对CAS登录页进行个性化定制.    一.开始 下图是 ...

  6. 【SSO单点系列】（3）：CAS4.0 登录页验证码的添加

    2016.08.23 更新 注意:这个教程只适合4.0版本的,4.1以及以上的版本的已经不试用了, 后面几篇有人提到过 源码网盘链接更新了下 : 链接: http://pan.baidu.com/s/ ...

  7. 通过ajax前端后台交互/登录页和注册页前端后台交互详解/前端后台交互基础应用/几个后台函数的基础应用/php文件函数基础应用/php字符传函数基础应用/php数组函数基础应用

      前  言  PHP     学习了好久的PHP,今天做一个可以后台交互的登录页和注册页,没做什么判断,简单的了解一下. 具体的内容分析如下: ① PHP中的数据传输-->>由注册页传输 ...

  8. python爬虫scrapy框架——人工识别知乎登录知乎倒立文字验证码和数字英文验证码

    目前知乎使用了点击图中倒立文字的验证码: 用户需要点击图中倒立的文字才能登录. 这个给爬虫带来了一定难度,但并非无法解决,经过一天的耐心查询,终于可以人工识别验证码并达到登录成功状态,下文将和大家一一 ...

  9. Spring-Security自定义登录页&inMemoryAuthentication验证

    Spring Security是为基于Spring的应用程序提供声明式安全保护的安全性框架.框架下内容比较多,可以做到按照角色权限对请求路径进行限制.今天主要验证自定义登录页,在内存用户存储中进行请求 ...

随机推荐

  1. cocos2d-x JS 弹出对话框触摸监听（吞噬点击事件遮挡层）

    在游戏中,我们经常会碰到一些弹窗,这些弹窗禁止点透,也就是禁止触摸事件传递到底层,我们称之为遮挡层,这些遮挡层,需要开发遮挡层,我们首先得了解cocos2d-js的触摸传递机制. 根据官方文档,我们可 ...

  2. Selenium基本使用(十二)测试报告生成

    报告目录结构 Reporter根目录 | |-------------LOGS |                                                | |         ...

  3. protobuf编译.proto文档

    1:在同一目录下按键盘shift+鼠标右键-->点击-->在此处打开命令窗口,打开后如下图所示 2.该目录下有person.proto文档,可以自己编写,如下 syntax = " ...

  4. STL之Map和multimap容器

    1.Map和multimap容器 1)map是标准的关联式容器,一个map是一个键值对序列,即(key,value)对.它提供基于key的快速检索能力. 2)map中key值是唯一的.集合中的元素按一 ...

  5. JavaScript三种判断语句和三元运算符

    三种判断语句 1.if结构 语法:if(条件){条件满足时执行的代码块} 2.if else结构 语法:if(条件){条件满足时执行的代码块}   else{条件不满足时执行的代码块} 3.if el ...

  6. SlimScroll插件学习

    SlimScroll插件学习 SlimScroll插件,是一个很好用的滚动条插件. 第一个实例程序: js代码: <script src="../slimScroll/jquery-3 ...

  7. web基础，用html元素制作web页面

    用div,form制作登录页面,尽可能做得漂亮. 练习使用下拉列表选择框,无序列表,有序列表,定义列表. 观察常用网页的HTML元素,在实际的应用场景中,用已学的标签模仿制作. <!DOCTYP ...

  8. 【2017-03-13】Tsql 表连接

    笛卡尔积          穷举 在未建立连接的情况下,将car表的name列和brand表的brand_name列进行笛卡尔积查询后,实际是将两列相乘,进行穷举,列举出所有可能性 表连接:将多个表不 ...

  9. 大数据和hadoop有什么关系？

    本文资料来自百度文库相关文档 Hadoop,Spark和Storm是目前最重要的三大分布式计算系统,Hadoop常用于离线的复杂的大数据处理,Spark常用于离线的快速的大数据处理,而Storm常用于 ...

  10. flask 在模板中渲染表单

    在模板中渲染表单 为了能够在模板中渲染表单,我们需要把表单类实例传入模板.首先在视图函数里实例化表单类LoginForm,然后再render_template()函数中使用关键脑子参数form将表单实 ...