├── demo.png
├── PutInTampermonkey.png
├── index.html
├── README.md
└── canvas-particle.js
/demo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/monkey-wenjun/CanvasParticles/master/demo.png
--------------------------------------------------------------------------------
/PutInTampermonkey.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/monkey-wenjun/CanvasParticles/master/PutInTampermonkey.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Particles
6 |
7 |
8 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # CanvasParticles
2 | html5 canvas 实现网页背景粒子效果
3 |
4 | ##1.引入js文件
5 | ```
6 |
7 | ```
8 | ##2.配置
9 | 配置，调用CanvasParticle函数，传入配置参数即可，如果不配置则用默认配置
10 | 在你的js文件中加上如下配置
11 |
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 |
30 | ##效果图
31 | 可以将js文件放入Tampermonkey作为脚本执行，看百度首页的效果图如下
32 | 
--------------------------------------------------------------------------------
/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 | var body = getElementByTag("body")[0];
13 | var canvasDiv = getELementById("canvas-particle");
14 | var canvasObj = document.createElement("canvas");
15 |
16 | var canvas = {
17 | element: canvasObj,
18 | points : [],
19 | // 默认配置
20 | config: {
21 | vx: canvasConfig.vx || 4,
22 | vy: canvasConfig.vy || 4,
23 | height: canvasConfig.height || 2,
24 | width: canvasConfig.width || 2,
25 | count: canvasConfig.count || 100,
26 | color: canvasConfig.color || "121, 162, 185",
27 | stroke: canvasConfig.stroke || "130,255,255",
28 | dist: canvasConfig.dist || 6000,
29 | e_dist: canvasConfig.e_dist || 20000,
30 | max_conn: 10
31 | }
32 | };
33 |
34 | // 获取context
35 | if(canvas.element.getContext("2d")){
36 | canvas.context = canvas.element.getContext("2d");
37 | }else{
38 | return null;
39 | }
40 |
41 | body.style.padding = "0";
42 | body.style.margin = "0";
43 | // body.replaceChild(canvas.element, canvasDiv);
44 | body.appendChild(canvas.element);
45 |
46 | canvas.element.style = "position: absolute; top: 0; left: 0; z-index: -1;";
47 | canvasSize(canvas.element);
48 | window.onresize = function(){
49 | canvasSize(canvas.element);
50 | }
51 | body.onmousemove = function(e){
52 | var event = e || window.event;
53 | canvas.mouse = {
54 | x: event.clientX,
55 | y: event.clientY
56 | }
57 | }
58 | document.onmouseleave = function(){
59 | canvas.mouse = undefined;
60 | }
61 | setInterval(function(){
62 | drawPoint(canvas);
63 | }, 40);
64 | }
65 |
66 | // 设置canvas大小
67 | function canvasSize(canvas){
68 | canvas.width = window.innerWeight || document.documentElement.clientWidth || document.body.clientWidth;
69 | canvas.height = window.innerWeight || document.documentElement.clientHeight || document.body.clientHeight;
70 | }
71 |
72 | // 画点
73 | function drawPoint(canvas){
74 | var context = canvas.context,
75 | point,
76 | dist;
77 | context.clearRect(0, 0, canvas.element.width, canvas.element.height);
78 | context.beginPath();
79 | context.fillStyle = "rgb("+ canvas.config.color +")";
80 | for(var i = 0, len = canvas.config.count; i < len; i++){
81 | if(canvas.points.length != canvas.config.count){
82 | // 初始化所有点
83 | point = {
84 | x: Math.floor(Math.random() * canvas.element.width),
85 | y: Math.floor(Math.random() * canvas.element.height),
86 | vx: canvas.config.vx / 2 - Math.random() * canvas.config.vx,
87 | vy: canvas.config.vy / 2 - Math.random() * canvas.config.vy
88 | }
89 | }else{
90 | // 处理球的速度和位置，并且做边界处理
91 | point = borderPoint(canvas.points[i], canvas);
92 | }
93 | context.fillRect(point.x - canvas.config.width / 2, point.y - canvas.config.height / 2, canvas.config.width, canvas.config.height);
94 |
95 | canvas.points[i] = point;
96 | }
97 | drawLine(context, canvas, canvas.mouse);
98 | context.closePath();
99 | }
100 |
101 | // 边界处理
102 | function borderPoint(point, canvas){
103 | var p = point;
104 | if(point.x <= 0 || point.x >= canvas.element.width){
105 | p.vx = -p.vx;
106 | p.x += p.vx;
107 | }else if(point.y <= 0 || point.y >= canvas.element.height){
108 | p.vy = -p.vy;
109 | p.y += p.vy;
110 | }else{
111 | p = {
112 | x: p.x + p.vx,
113 | y: p.y + p.vy,
114 | vx: p.vx,
115 | vy: p.vy
116 | }
117 | }
118 | return p;
119 | }
120 |
121 | // 画线
122 | function drawLine(context, canvas, mouse){
123 | context = context || canvas.context;
124 | for(var i = 0, len = canvas.config.count; i < len; i++){
125 | // 初始化最大连接数
126 | canvas.points[i].max_conn = 0;
127 | // point to point
128 | for(var j = 0; j < len; j++){
129 | if(i != j){
130 | dist = Math.round(canvas.points[i].x - canvas.points[j].x) * Math.round(canvas.points[i].x - canvas.points[j].x) +
131 | Math.round(canvas.points[i].y - canvas.points[j].y) * Math.round(canvas.points[i].y - canvas.points[j].y);
132 | // 两点距离小于吸附距离，而且小于最大连接数，则画线
133 | if(dist <= canvas.config.dist && canvas.points[i].max_conn canvas.config.dist && dist <= canvas.config.e_dist){
153 | canvas.points[i].x = canvas.points[i].x + (mouse.x - canvas.points[i].x) / 20;
154 | canvas.points[i].y = canvas.points[i].y + (mouse.y - canvas.points[i].y) / 20;
155 | }
156 | if(dist <= canvas.config.e_dist){
157 | context.lineWidth = 1;
158 | context.strokeStyle = "rgba("+ canvas.config.stroke + ","+ (1 - dist / canvas.config.e_dist) +")";
159 | context.beginPath();
160 | context.moveTo(canvas.points[i].x, canvas.points[i].y);
161 | context.lineTo(mouse.x, mouse.y);
162 | context.stroke();
163 | }
164 | }
165 | }
166 | }
167 | return canvasInit;
168 | })();
--------------------------------------------------------------------------------