window.requestAnimationFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 2);
};
})();

var myCanvas = document.getElementById("canvas");
var ctx = myCanvas.getContext("2d"); //getContext 设置画笔
var num;
var w, h;
var duixiang = [];
var move = {};
function widthheight() {
w = myCanvas.width = window.innerWidth;
h = myCanvas.height = window.innerHeight;
num = Math.floor(w * h * 0.00028); //点的数量。根据屏幕大小确定
for (var i = 0; i < num; i++) {
duixiang[i] = {
x: Math.random() * w,
y: Math.random() * h,
cX: Math.random() * 0.6 - 0.3,
cY: Math.random() * 0.6 - 0.3,
R: Math.floor(Math.random() * 5) + 2,
//CC:Math.floor(Math.random()*3)+2,
r: Math.floor(Math.random() * 254),
g: Math.floor(Math.random() * 254),
b: Math.floor(Math.random() * 254)
}
// console.log(duixiang[i])
Cricle(duixiang[i].x, duixiang[i].y, duixiang[i].R, duixiang[i].r, duixiang[i].g, duixiang[i].b);
//Cricle(duixiang[i].x,duixiang[i].y,duixiang[i].R,duixiang[i].CC);
}
};
widthheight(); //获取浏览器的等宽度等高
function Cricle(x, y, R, r, g, b) {
ctx.save(); //保存路径
if (Math.random() > 0.991) {
ctx.globalAlpha = 0.9;
} //ctx.fillStyle = "#CCC";}//填充的背景颜色
else {
ctx.globalAlpha = 0.47;
}
ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
ctx.beginPath(); //开始绘画
ctx.arc(x, y, R, Math.PI * 2, 0); //绘画圆 x y 半径(大小) 角度 一个PI 是180 * 2 = 360 真假 0/1 true/false
ctx.closePath(); //结束绘画
ctx.fill(); //填充背景颜色
ctx.restore(); //回复路径
};
Cricle();

!
function draw() {
ctx.clearRect(0, 0, w, h) //先清除画布上的点
for (var i = 0; i < num; i++) {
duixiang[i].x += duixiang[i].cX;
duixiang[i].y += duixiang[i].cY;
if (duixiang[i].x > w || duixiang[i].x < 0) {
duixiang[i].cX = -duixiang[i].cX;
}
if (duixiang[i].y > h || duixiang[i].y < 0) {
duixiang[i].cY = -duixiang[i].cY;
}
Cricle(duixiang[i].x, duixiang[i].y, duixiang[i].R, duixiang[i].r, duixiang[i].g, duixiang[i].b);

//勾股定理判断两点是否连线
for (var j = i + 1; j < num; j++) {
if ((duixiang[i].x - duixiang[j].x) * (duixiang[i].x - duixiang[j].x) + (duixiang[i].y - duixiang[j].y) * (duixiang[i].y - duixiang[j].y) <= 55 * 55) {
line(duixiang[i].x, duixiang[i].y, duixiang[j].x, duixiang[j].y, 0, i, j)
}
if (move.x) {
if ((duixiang[i].x - move.x) * (duixiang[i].x - move.x) + (duixiang[i].y - move.y) * (duixiang[i].y - move.y) <= 100 * 100) {
line(duixiang[i].x, duixiang[i].y, move.x, move.y, 1, i, 1)
}
}
}
}
window.requestAnimationFrame(draw)
} ();

//绘制线条
function line(x1, y1, x2, y2, flag, i, j) {
if (flag) {
var color = ctx.createLinearGradient(x1, y1, x2, y2);
ctx.globalAlpha = 0.5;
color.addColorStop(0, "rgb(" + duixiang[i].r + "," + duixiang[i].g + "," + duixiang[i].b + ")");
color.addColorStop(0.8, "#019ee5");
} else {
var color = ctx.createLinearGradient(x1, y1, x2, y2);
ctx.globalAlpha = 0.9;
color.addColorStop(0, "rgb(" + duixiang[i].r + "," + duixiang[i].g + "," + duixiang[i].b + ")");
color.addColorStop(1, "rgb(" + duixiang[j].r + "," + duixiang[j].g + "," + duixiang[j].b + ")");
}
ctx.save();
ctx.strokeStyle = color;
ctx.lineWidth = 0.5;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
//ctx.restore();
}

//document.onmousemove = function(e){
// move.x = e.clientX;
// move.y = e.clientY;
//}
//console.log(move)//去掉注释 ,可以与背景互动
window.onresize = function() {
location.reload();
}
* {
margin: 0;
padding: 0;
}

#canvas {
position: fixed;
background: #ccc;
overflow: auto;
z-index: -1;
}
<canvas id="canvas"></canvas>