当前位置：主页 > javascript教程 >

canvas实现知乎登录页背景效果代码实例

  • 更新时间：2020-05-05 15:29:44
  • 编辑：汲飞绿

前言

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

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

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

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持码农之家！

相关教程

  • js canvas如何实现图片放大镜功能

    这篇文章主要为大家详细介绍了js canvas实现放大镜查看图片功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

    发布时间：2019-08-02

  • 详解使用canvas实现围绕旋转动画

    这篇文章主要为大家详细介绍了JavaScript canvas实现围绕旋转动画，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

    发布时间：2020-02-29

  • canvas轨迹回放功能的实现代码和方法

    这篇文章主要介绍了canvas轨迹回放功能实现过程以及相关的代码整理，跟着小编一起学习下吧。

    发布时间：2019-11-23

  • JavaScript Canvas绘制圆形时钟效果代码实例

    这篇文章主要为大家详细介绍了JavaScript Canvas绘制圆形时钟效果的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

    发布时间：2020-03-17

  • HTML5+Canvas调用手机拍照功能并实现上传

    这篇文章主要为大家详细介绍了HTML5+Canvas调用手机拍照功能实现图片上传，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

    发布时间：2019-11-28

  • HTML5+CSS3+JavaScript从入门到精通

    HTML5+CSS3+JavaScript从入门到精通

    本书以基础知识、示例、实战案例相结合的方式详尽讲述了HTML，CSS，JavaScript及目前最新的前端技术

    大小：186 MBweb开发电子书

  • 精通JavaScript

    精通JavaScript

    精通JavaScript(第2版) 是iQuery之父的经典之作，是深入学习JavaScript技术的绝佳教材，涵盖了可重用代码、文档对象模型、Ajax、Web生产工具、AngularJS等内容。作者讲解了JavaScript的发展现状、实用技

    大小：33.5 MBJavaScript电子书

  • JavaScript+Vue+React全程实例

    JavaScript+Vue+React全程实例

    这书根据基础知识与开发实践活动紧密结合的观念，选萃当今简易、好用和时兴的百余个JavaScript编码案例，协助阅读者学习培训把握JavaScript开发语言。本书內容详实、重中之重突显、浅显易懂，包含了JavaScript前端开发开发的各个方面。

    大小：59150 MB MJS实例

  • JavaScript和jQuery实战手册

    JavaScript和jQuery实战手册

    JavaScript可以大大改进网页的动画、交互性和视觉效果，但学习该门语言不太容易。本书通过一步步引导JavaScript基础知识，展示了如何使用jQuery（即预先写好的JavaScript代码库）来节省时间和精

    大小：103 MBJavaScript电子书

  • Web前端开发精品课 JavaScript基础教程

    Web前端开发精品课 JavaScript基础教程

    《JavaScript基础教程》 共分为2大部分，第1部分是JavaScript基础知识，主要学习JavaScript基础概念如变量、运算符、表达式等。第二部分是JavaScript进阶知识，主要学习DOM、事件操作以及各种开发技

    大小：9.7 MB前端电子书

  • 移动网页设计与开发：HTML5+CSS3+JavaScript

    移动网页设计与开发：HTML5+CSS3+JavaScript

    将落伍的网址打导致更为灵便、友善，而且令其充分运用不一样机器设备和电脑浏览器的与众不同优点。根据《移动网页设计与开发HTML5+CSS3+JavaScript》，您将为投身第一线开发充分准备！ *內容

    大小：30.2 MB移动开发电子书

  • JavaScript for PHP Developers

    JavaScript for PHP Developers

    大小：27.4 MBJavaScript电子书

  • JavaScript从入门到精通

    JavaScript从入门到精通

    本书是javascript高级程序的权威指南，从初学者角度出发，通过通俗易懂的语言、丰富多彩的实例，详细介绍了使用JavaScript语言进行程序开发应该掌握的各方面技术，是一本入门经典书籍

    大小：92.2 MBJavaScript电子书

  • 学习JavaScript数据结构与算法(第3版)

    学习JavaScript数据结构与算法(第3版)

    大小：13.6 MBJavaScript电子书

  • JavaScript基础教程

    JavaScript基础教程

    本书是经典的JavaScript入门书，以易学便查、图文并茂、循序渐进和善于用常见任务讲解语言知识而著称。书中从JavaScript语言基础开始，分别讨论了图像、框架、浏览器窗口、表单、正则表达式

    大小：14 MBJS教程电子书

用户留言

发布评论

最新更新

热门推荐