您的位置：首页 > Web前端 > HTML5

html5canvas:教你实现知乎登录动态粒子背景

2017-05-26 15:42 218 查看

html代码

首先要制作我们的页面，用到的是html5的新标签canvas；其实canvas就是我们需要用javascript脚本语言来绘图的“画布”，只是相当于一个容器呈现我们画图的结果，所以我们在页面中需要创建一个充满屏幕的canvas

<body>
<canvas id="canvas"></canvas>
<div class="text">仿知乎动态粒子效果背景</div>
</body>

1
2
3
4

是的，

body

中只有这两行代码就可以了，甚至可以只有一行代码

css样式

css样式也没有什么好说的，只是要让canvas充满屏幕就可以了

html{height: 100%}
body{margin: 0;height: 100%;
background: #fff;}
canvas{display: block;width: 100%;height: 100%;}
.text{
width: 100%;
background: transparent;
display: flex;
justify-content: center;
height: 100%;
line-height: 100%;
top: 0;
position: absolute;
top: 50%;
font-size: 50px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

写法不唯一，只要要你的canvas是充满整个屏幕的就好，当然，你要是不需要充满屏幕也可以~

js代码

说完了html和css，那么就剩js了，主要是通过js脚本来创建每个线段和粒子的~github上的例子中使用的是es6编写的，不过在demo中也使用了gulp安装babel可以将es6代码转化为es5（所以索demo中同时有es6的代码也有es5的代码，大家按需下载~）主要的思路如下

设置单个粒子的随机x，y坐标和圆圈的半径

使用canvas的api进行绘制粒子（圆圈）和粒子之前连线，设置一个范围，在此范围内的粒子圆心到圆心通过直线连接

让粒子在屏幕范围内移动

设置鼠标的交互事件，相当于以鼠标位置的x,y坐标为圆心，固定或随机值为半径重新创建了一个粒子，并且也在一定范围内也设置和其他粒子的连线（同第二步）

其实思路就以上五点，只不过我们需要了解canvas的api才能绘出我们想要的结果

设置单个粒子的随机x，y坐标和圆圈的半径

//创建对象
//以一个圆为对象
//设置随机的 x，y坐标，r半径，_mx，_my移动的距离
//this.r是创建圆的半径，参数越大半径越大
//this._mx,this._my是移动的距离，参数越大移动
constructor(x, y) {
this.x = x;
this.y = y;
this.r = Math.random() * 10 ;
this._mx = Math.random() ;
this._my = Math.random() ;

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

canvas 画圆和画直线

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航