canvas-简单快速实现知乎登录页背景效果
2017-05-07 17:57
501 查看
前言
打开知乎的登录页,就可以看到其背景有一个动效,看起来好像蛮不错的样子:这个效果使用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简单快速的实现知乎登录页背景效果
- canvas-简单快速实现知乎登录页背景效果
- 用BlueEffects效果库简单实现类似于csdn中的背景颜色渐变的效果
- 超简单的邮件快速登录脚本制作实现方法[转]
- iOS开发-简单图片背景替换(实现抠图效果)
- 自定义CoordinatorLayout的Behavior实现知乎和简书快速返回效果
- iOS开发-简单图片背景替换(实现抠图效果)
- canvas之万花筒效果的简单实现(推荐)
- Android 使用Toolbar+DrawerLayout快速实现仿“知乎APP”侧滑导航效果
- 自定义ImageSpan实现简单的文字图片背景效果
- JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
- canvas实现简单直线扫描效果
- iOS实现登录页背景具有动态效果
- 简单模拟实现简单的当登录延时的效果
- canvas实现流星雨的背景效果
- 简单示例AJAX结合PHP代码实现登录效果代码
- EmailEditView的实现(仿知乎邮箱登录效果)
- Canvas画板实现一个简单的球在盒子内随机移动效果
- Struts2实现简单的登录效果
- 【canvas系列】canvas实现“ 简单的Amaziograph效果”--画对称图【强迫症福利】