Canvas绘制简单网状粒子背景效果

canvas简单介绍

canvas是HTML5的标签，用于绘制一些图像、动画等。canvas本身仅作为容器，需要使用脚本（JavaScript）来达到绘制图像的效果。

更多详细介绍看官方文档或W3C。

canvas绘制背景效果

实现原理

在canvas上绘制出多个无序粒子，设置定时器不断清空画布，让粒子实现运动效果。判断每个粒子间的距离，到小于一定值的时候使其实现相连，并根据距离来实现连线间的粗细效果。

代码实现

<canvas id="canvas">您的浏览器不支持canvas</canvas>

定义变量

let cvs = document.getElementById('canvas'),
	ctx = cvs.getContext('2d'),
	cursor = {
   x: null, y: null, max: 20000}, //鼠标坐标
	points = [], //粒子集合
	number = 300;  //粒子数

根据浏览器页面设置canvas大小、获取鼠标位置

window.onresize = function() {
   
	cvs.width = window.innerWidth;
	cvs.height = window.innerHeight;
}
window.onmousemove = function(e) {
   
	e = e || window.event;
	cursor.x = e.clientX;
	cursor