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

来源：互联网发布：知乎考清华准备编辑：程序博客网时间：2024/05/05 13:53

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 画圆和画直线

阅读全文

0 0