canvas简单快速的实现知乎登录页背景效果


Posted in Javascript onMay 08, 2017

前言

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

canvas简单快速的实现知乎登录页背景效果

这个效果使用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);
})();

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Js中sort()方法的用法
Nov 04 Javascript
TopList标签和JavaScript结合两例
Aug 12 Javascript
js实时获取系统当前时间实例代码
Jun 28 Javascript
用jQuery toggleClass 实现鼠标移上变色
May 14 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
为输入框加入数字js校验代码分享
Nov 02 Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 Javascript
vue transition 在子组件中失效的解决
Nov 12 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 Javascript
微信小程序修改数组长度的问题的解决
Dec 17 Javascript
详解JavaScript中return的用法
May 08 #Javascript
如何使用angularJs
May 08 #Javascript
关于foreach循环中遇到的问题小结
May 08 #Javascript
js下载文件并修改文件名
May 08 #Javascript
JS将unicode码转中文方法
May 08 #Javascript
js实现点击切换checkbox背景图片的简单实例
May 08 #Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 #Javascript
You might like
10条PHP编程习惯助你找工作
2008/09/29 PHP
PHP 多维数组排序实现代码
2009/08/05 PHP
php性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
深入解析PHP垃圾回收机制对内存泄露的处理
2013/06/14 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
php去除html标记的原生函数详解
2015/01/27 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
Laravel find in set排序实例
2019/10/09 PHP
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
jquery 选取方法都有哪些
2014/05/18 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
javascript连续赋值问题
2015/07/08 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
封装好的javascript前端分页插件pagination
2016/01/04 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
JavaScript 五大常见函数
2018/03/23 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
原生JavaScript实现刮刮乐
2020/09/29 Javascript
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
Python中的异常处理学习笔记
2015/01/28 Python
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
Pthon批量处理将pdb文件生成dssp文件
2015/06/21 Python
Python 处理图片像素点的实例
2019/01/08 Python
python导包的几种方法(自定义包的生成以及导入详解)
2019/07/15 Python
pandas分批读取大数据集教程
2020/06/06 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
家长给孩子的表扬信
2014/01/17 职场文书
班主任评语大全
2014/04/26 职场文书
品牌服务方案
2014/06/03 职场文书
党员教师四风自我剖析材料
2014/09/30 职场文书
会议接待欢迎标语
2014/10/08 职场文书
2016春季运动会开幕词
2016/03/04 职场文书