<canvas id="canvas" style="position:absolute;width:100%;height:100%;background:#000;"></canvas>

window.requestAnimFrame = (function () {return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||function (callback) {window.setTimeout(callback, 1000 / 60);};})();var can = document.getElementById("canvas");var cxt = can.getContext("2d");can.width = 1920;can.height = 950;cxt.lineWidth = 0.3;//初始链接线条显示位置var mousePosition = {x: 30 * can.width / 100,y: 30 * can.height / 100}//圆形粒子对象参数var dots = {n: 500,//圆形粒子个数distance: 50,//圆形粒子之间的距离d_radius: 100,//粒子距离鼠标点的距离array: []//保存n个圆形粒子对象
    }//创建随即颜色值function colorValue(min) {return Math.floor(Math.random() * 255 + min);}function createColorStyle(r, g, b) {return "rgba(" + r + "," + g + "," + b + ", 1)";}//混合两个圆形粒子的颜色function mixConnect(c1, r1, c2, r2) {//圆的颜色 半径return (c1 * r1 + c2 * r2) / (r1 + r2);};//生成线条的颜色function lineColor(dot1, dot2) {//获取具体的圆的颜色再计算var color1 = dot1.color,color2 = dot2.color;var r = mixConnect(color1.r, dot1.radius, color2.r, dot2.radius);var g = mixConnect(color1.g, dot1.radius, color2.g, dot2.radius);var b = mixConnect(color1.b, dot1.radius, color2.b, dot2.radius);return createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b));}//生成圆形粒子的颜色对象function Color(min) {min = min || 0;this.r = colorValue(min);this.g = colorValue(min);this.b = colorValue(min);this.style = createColorStyle(this.r, this.g, this.b);}//创建圆形粒子对象function Dot() {//圆形粒子随机圆心坐标点this.x = Math.random() * can.width;this.y = Math.random() * can.height;//x y 方向运动的速度值this.vx = -0.5 + Math.random();this.vy = -0.5 + Math.random();this.radius = Math.random() * 5;//this.color = "#ff3333";this.color = new Color();}//绘制出圆形粒子Dot.prototype.draw = function () {cxt.beginPath();cxt.fillStyle = this.color.style;cxt.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);cxt.fill();}//添加圆形粒子function createCircle() {for (var i = 0; i < dots.n; i++) {dots.array.push(new Dot());}}//绘制出圆形粒子function drawDots() {for (var i = 0; i < dots.n; i++) {var dot = dots.array[i];dot.draw();}}//drawDots();//移动function moveDots() {for (var i = 0; i < dots.n; i++) {var dot = dots.array[i];//当圆形粒子对象碰壁的时候就反弹回来if (dot.y < 0 || dot.y > can.height) {dot.vx = dot.vx;dot.vy = -dot.vy;} else if (dot.x < 0 || dot.x > can.width) {dot.vx = -dot.vx;dot.vy = dot.vy;}//给圆形粒子圆心坐标加上速度值移动圆形粒子dot.x += dot.vx;dot.y += dot.vy;}}//链接粒子对象function connectDots() {for (var i = 0; i < dots.n; i++) {for (var j = 0; j < dots.n; j++) {iDot = dots.array[i];jDot = dots.array[j];if ((iDot.x - jDot.x) < dots.distance && (iDot.y - jDot.y) < dots.distance && (iDot.x - jDot.x) > -dots.distance && (iDot.y - jDot.y) > -dots.distance) {if ((iDot.x - mousePosition.x) < dots.d_radius && (iDot.y - mousePosition.y) < dots.d_radius && (iDot.x - mousePosition.x) > -dots.d_radius && (iDot.y - mousePosition.y) > -dots.d_radius) {cxt.beginPath();//cxt.strokeStyle = "yellow";cxt.strokeStyle = lineColor(iDot, jDot);cxt.moveTo(iDot.x, iDot.y);cxt.lineTo(jDot.x, jDot.y);cxt.closePath();cxt.stroke();}}}}}createCircle();//让圆形粒子不断的移动function animateDots() {cxt.clearRect(0, 0, can.width, can.height);moveDots();connectDots()drawDots();requestAnimFrame(animateDots);}animateDots();can.onmousemove = function (ev) {var ev = ev || window.event;mousePosition.x = ev.pageX;mousePosition.y = ev.pageY;}can.onmouseout = function () {mousePosition.x = can.width / 2;mousePosition.y = can.height / 2;}