├── PutInTampermonkey.png
├── README.md
├── canvas-particle.js
├── demo-2.png
├── demo.png
└── index.html


/PutInTampermonkey.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LocoTi/CanvasParticles/66ca308106e9454c14da52472f0c0a6e89867002/PutInTampermonkey.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # CanvasParticles
 2 | html5 canvas 实现网页背景粒子效果
 3 | 
 4 | ##1.引入js文件
 5 | ```
 6 | <script type="text/javascript" src="canvas-particle.js"></script>
 7 | ```
 8 | ##2.配置
 9 | 配置，调用CanvasParticle函数，传入配置参数即可，如果不配置则用默认配置<br>
10 | 在你的js文件中加上如下配置<br>
11 | <pre>
12 | window.onload = function(){
13 | 	//配置
14 | 	var config = {
15 | 		vx: 4,//点x轴速度,正为右，负为左
16 | 		vy:  4,//点y轴速度
17 | 		height: 2,//点高宽，其实为正方形，所以不宜太大
18 | 		width: 2,
19 | 		count: 100,//点个数
20 | 		color: "121, 162, 185",//点颜色
21 | 		stroke: "130,255,255",//线条颜色
22 | 		dist: 6000,//点吸附距离
23 | 		e_dist: 20000,//鼠标吸附加速距离
24 | 		max_conn: 10//点到点最大连接数
25 | 	}
26 | 	//调用
27 | 	CanvasParticle(config);
28 | }
29 | </pre>
30 | ##效果图
31 | 可以将js文件放入Tampermonkey作为脚本执行，看百度首页的效果图如下<br>
32 | ![效果图](https://github.com/LocoTi/CanvasParticles/blob/master/PutInTampermonkey.png "插件效果图")


--------------------------------------------------------------------------------
/canvas-particle.js:
--------------------------------------------------------------------------------
  1 | var CanvasParticle = (function(){
  2 | 	function getElementByTag(name){
  3 | 		return document.getElementsByTagName(name);
  4 | 	}
  5 | 	function getELementById(id){
  6 | 		return document.getElementById(id);
  7 | 	}
  8 | 	// 根据传入的config初始化画布
  9 | 	function canvasInit(canvasConfig){
 10 | 		canvasConfig = canvasConfig || {};
 11 | 		var html = getElementByTag("html")[0];
 12 | 		// 获取body作为背景
 13 | 		// var body = getElementByTag("body")[0];
 14 | 
 15 | 		// 获取特定div作为背景
 16 | 		// mydiv是你想要将其作为背景的div的ID
 17 | 		var body = document.getElementById("mydiv");
 18 | 		var canvasObj = document.createElement("canvas");
 19 | 
 20 | 		var canvas = {
 21 | 			element: canvasObj,
 22 | 			points : [],
 23 | 			// 默认配置
 24 | 			config: {
 25 | 				vx: canvasConfig.vx || 4,
 26 | 				vy:  canvasConfig.vy || 4,
 27 | 				height: canvasConfig.height || 2,
 28 | 				width: canvasConfig.width || 2,
 29 | 				count: canvasConfig.count || 100,
 30 | 				color: canvasConfig.color || "121, 162, 185",
 31 | 				stroke: canvasConfig.stroke || "130,255,255",
 32 | 				dist: canvasConfig.dist || 6000,
 33 | 				e_dist: canvasConfig.e_dist || 20000,
 34 | 				max_conn: 10
 35 | 			}
 36 | 		};
 37 | 
 38 | 		// 获取context
 39 | 		if(canvas.element.getContext("2d")){
 40 | 			canvas.context = canvas.element.getContext("2d");
 41 | 		}else{
 42 | 			return null;
 43 | 		}
 44 | 
 45 | 		body.style.padding = "0";
 46 | 		body.style.margin = "0";
 47 | 		// body.replaceChild(canvas.element, canvasDiv);
 48 | 		body.appendChild(canvas.element);
 49 | 
 50 | 		canvas.element.style = "position: fixed; top: 0; left: 0; z-index: -1;";
 51 | 		canvasSize(canvas.element);
 52 | 		window.onresize = function(){
 53 | 			canvasSize(canvas.element);
 54 | 		}
 55 | 		body.onmousemove = function(e){
 56 | 			var event = e || window.event;
 57 | 			canvas.mouse = {
 58 | 				x: event.clientX,
 59 | 				y: event.clientY
 60 | 			}
 61 | 		}
 62 | 		document.onmouseleave = function(){
 63 | 			canvas.mouse = undefined;
 64 | 		}
 65 | 		setInterval(function(){
 66 | 			drawPoint(canvas);
 67 | 		}, 40);
 68 | 	}
 69 | 
 70 | 	// 设置canvas大小
 71 | 	function canvasSize(canvas){
 72 | 		// 获取窗口的宽高
 73 | 		// canvas.width = window.innerWeight || document.documentElement.clientWidth || document.body.clientWidth;
 74 | 		// canvas.height = window.innerWeight || document.documentElement.clientHeight || document.body.clientHeight;
 75 | 
 76 | 		// 获取特定div的宽高
 77 | 		var width = document.getElementById("mydiv").style.width;
 78 | 		var height = document.getElementById("mydiv").style.height;
 79 | 		width = parseInt(width);
 80 | 		height = parseInt(height);
 81 | 		canvas.width = width || window.innerWeight || document.documentElement.clientWidth || document.body.clientWidth;
 82 | 		canvas.height = height || window.innerWeight || document.documentElement.clientHeight || document.body.clientHeight;
 83 | 	}
 84 | 
 85 | 	// 画点
 86 | 	function drawPoint(canvas){
 87 | 		var context = canvas.context,
 88 | 			point,
 89 | 			dist;
 90 | 		context.clearRect(0, 0, canvas.element.width, canvas.element.height);
 91 | 		context.beginPath();
 92 | 		context.fillStyle = "rgb("+ canvas.config.color +")";
 93 | 		for(var i = 0, len = canvas.config.count; i < len; i++){
 94 | 			if(canvas.points.length != canvas.config.count){
 95 | 				// 初始化所有点
 96 | 				point = {
 97 | 					x: Math.floor(Math.random() * canvas.element.width),
 98 | 					y: Math.floor(Math.random() * canvas.element.height),
 99 | 					vx: canvas.config.vx / 2 - Math.random() * canvas.config.vx,
100 | 					vy: canvas.config.vy / 2 - Math.random() * canvas.config.vy
101 | 				}
102 | 			}else{
103 | 				// 处理球的速度和位置，并且做边界处理
104 | 				point =	borderPoint(canvas.points[i], canvas);
105 | 			}
106 | 			context.fillRect(point.x - canvas.config.width / 2, point.y - canvas.config.height / 2, canvas.config.width, canvas.config.height);
107 | 
108 | 			canvas.points[i] = point;
109 | 		}
110 | 		drawLine(context, canvas, canvas.mouse);
111 | 		context.closePath();
112 | 	}
113 | 
114 | 	// 边界处理
115 | 	function borderPoint(point, canvas){
116 | 		var p = point;
117 | 		if(point.x <= 0 || point.x >= canvas.element.width){
118 | 			p.vx = -p.vx;
119 | 			p.x += p.vx;
120 | 		}else if(point.y <= 0 || point.y >= canvas.element.height){
121 | 			p.vy = -p.vy;
122 | 			p.y += p.vy;
123 | 		}else{
124 | 			p = {
125 | 				x: p.x + p.vx,
126 | 				y: p.y + p.vy,
127 | 				vx: p.vx,
128 | 				vy: p.vy
129 | 			}
130 | 		}
131 | 		return p;
132 | 	}
133 | 
134 | 	// 画线
135 | 	function drawLine(context, canvas, mouse){
136 | 		context = context || canvas.context;
137 | 		for(var i = 0, len = canvas.config.count; i < len; i++){
138 | 			// 初始化最大连接数
139 | 			canvas.points[i].max_conn = 0;
140 | 			// point to point
141 | 			for(var j = 0; j < len; j++){
142 | 				if(i != j){
143 | 					dist = Math.round(canvas.points[i].x - canvas.points[j].x) * Math.round(canvas.points[i].x - canvas.points[j].x) + 
144 | 							Math.round(canvas.points[i].y - canvas.points[j].y) * Math.round(canvas.points[i].y - canvas.points[j].y);
145 | 					// 两点距离小于吸附距离，而且小于最大连接数，则画线
146 | 					if(dist <= canvas.config.dist && canvas.points[i].max_conn <canvas.config.max_conn){
147 | 						canvas.points[i].max_conn++;
148 | 						// 距离越远，线条越细，而且越透明
149 | 						context.lineWidth = 0.5 - dist / canvas.config.dist;
150 | 						context.strokeStyle = "rgba("+ canvas.config.stroke + ","+ (1 - dist / canvas.config.dist) +")"
151 | 						context.beginPath();
152 | 						context.moveTo(canvas.points[i].x, canvas.points[i].y);
153 | 						context.lineTo(canvas.points[j].x, canvas.points[j].y);
154 | 						context.stroke();
155 | 
156 | 					}
157 | 				}
158 | 			}
159 | 			// 如果鼠标进入画布
160 | 			// point to mouse
161 | 			if(mouse){
162 | 				dist = Math.round(canvas.points[i].x - mouse.x) * Math.round(canvas.points[i].x - mouse.x) + 
163 | 						Math.round(canvas.points[i].y - mouse.y) * Math.round(canvas.points[i].y - mouse.y);
164 | 				// 遇到鼠标吸附距离时加速，直接改变point的x，y值达到加速效果
165 | 				if(dist > canvas.config.dist && dist <= canvas.config.e_dist){
166 | 					canvas.points[i].x = canvas.points[i].x + (mouse.x - canvas.points[i].x) / 20;
167 | 					canvas.points[i].y = canvas.points[i].y + (mouse.y - canvas.points[i].y) / 20;
168 | 				}
169 | 				if(dist <= canvas.config.e_dist){
170 | 					context.lineWidth = 1;
171 | 					context.strokeStyle = "rgba("+ canvas.config.stroke + ","+ (1 - dist / canvas.config.e_dist) +")";
172 | 					context.beginPath();
173 | 					context.moveTo(canvas.points[i].x, canvas.points[i].y);
174 | 					context.lineTo(mouse.x, mouse.y);
175 | 					context.stroke();
176 | 				}
177 | 			}
178 | 		}
179 | 	}
180 | 	return canvasInit;
181 | })();
182 | 


--------------------------------------------------------------------------------
/demo-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LocoTi/CanvasParticles/66ca308106e9454c14da52472f0c0a6e89867002/demo-2.png


--------------------------------------------------------------------------------
/demo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LocoTi/CanvasParticles/66ca308106e9454c14da52472f0c0a6e89867002/demo.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>Particles</title>
 6 | </head>
 7 | <body>
 8 | 	<!-- 背景div -->
 9 | 	<div id="mydiv" style="width: 500px;height:500px;"></div>
10 | 	<script type="text/javascript">
11 | 		window.onload = function() {
12 | 		    //配置
13 | 		    var config = {
14 | 		        vx: 4,	//小球x轴速度,正为右，负为左
15 | 		        vy: 4,	//小球y轴速度
16 | 		        height: 2,	//小球高宽，其实为正方形，所以不宜太大
17 | 		        width: 2,
18 | 		        count: 100,		//点个数
19 | 		        color: "121, 162, 185", 	//点颜色
20 | 		        stroke: "130,255,255", 		//线条颜色
21 | 		        dist: 6000, 	//点吸附距离
22 | 		        e_dist: 20000, 	//鼠标吸附加速距离
23 | 		        max_conn: 10 	//点到点最大连接数
24 | 		    }
25 | 
26 | 		    //调用
27 | 		    CanvasParticle(config);
28 | 		}
29 | 	</script>
30 | 	<script type="text/javascript" src="canvas-particle.js"></script>
31 | </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------