先看一看效果:
先分析粒子连线的实现步骤:
1.初始化一张画布
2.创建粒子
1)创建粒子即在画布上画一个个小圆
2)初始化粒子的属性:数量:num 300;半径:3;圆形为随机排列且满足:x:0
3.粒子运动
这里要理解粒子运动的本质并不是粒子在运动,而是不断地重新绘画粒子,擦除之前的粒子;
4.粒子连线
1)是否构成连线的条件
2)构成条件的粒子之间连接成线
(接下来说一下一些步骤的实现,没按标准格式,文末有源码!)
先初始化一张画布
1
设置一下样式
1 body{2 margin:0;3 }4 #canvas{5 display: block;6 background-color: black;7 }
具体的画布大小我们在js代码中实现
1 var cxt=document.getElementById("canvas").getContext('2d');//创建画笔2 var canvas=document.getElementById("canvas");3 canvas.width=window.innerWidth;//设置画布宽高4 canvas.height=window.innerHeight;
粒子的属性
1 var num=300;2 var data=[];//储存粒子的属性数据
3 functioninit(){4 for(var i=0;i
9 sY: Math.random() * 0.6 - 0.3
10 };11 createArc(data[i].x1,data[i].y1);//调用创建粒子的函数12 }13 }14 init();
创建粒子的函数
1 functioncreateArc(x,y){2 cxt.save();3 cxt.beginPath();4 cxt.fillStyle='greenyellow';//粒子的颜色5 cxt.arc(x,y,2,0,Math.PI*2,false);6 cxt.closePath();7 cxt.fill();8 cxt.restore();9 }
粒子运动
1 functiondrawPath(){2 cxt.clearRect(0,0,window.innerWidth,window.innerHeight);//先清除之前的圆
3 for(var i=0;i
7 if(data[i].x1<0||data[i].x1>window.innerWidth) data[i].sX=-data[i].sX;8 if(data[i].y1<0||data[i].y1>window.innerHeight) data[i].sY=-data[i].sY;9 createArc(data[i].x1,data[i].y1);10 //利用勾股定理判断是否连线,如果两点之间的距离小于某一值则调用createLine函数创建线条
11 for(var j=i+1;j
12 if(Math.pow(data[i].x1-data[j].x1,2)+Math.pow(data[i].y1-data[j].y1,2)<100*80)createLine(data[i].x1,data[i].y1,data[j].x1,data[j].y1);13 }14 }15 }16 setInterval(function(){ //利用定时器,没1毫秒调用一次该函数,使得粒子不断地擦除旧圆绘画新圆17 drawPath()},1);
以下是创建线条地createLine函数
1 functioncreateLine(x1,y1,x2,y2){2 cxt.save();3 var lin=cxt.createLinearGradient(x1,y1,x2,y2);4 lin.addColorStop(0,'blue');5 lin.addColorStop(1,'green');6 cxt.lineWidth=1.5;7 cxt.strokeStyle=lin;8 cxt.beginPath();9 //连线
10 cxt.moveTo(x1,y1);11 cxt.closePath();12 cxt.lineTo(x2,y2);13 cxt.stroke();14 cxt.restore();15 }
至此代码就结束了,以下是源码
1
2
3
4
5
粒子连线6
7 body{8 margin:0;9 }10 #canvas{11 display: block;12 background-color: black;13 }14
15
16
17
18 //初始化画布属性
19 var cxt=document.getElementById("canvas").getContext('2d');20 var canvas=document.getElementById("canvas");21 canvas.width=window.innerWidth;22 canvas.height=window.innerHeight;23 var num=300;24 var data=[];//储存粒子的属性数据
25 functioninit(){26 for(var i=0;i
31 sY: Math.random() * 0.6 - 0.3
32 };33 createArc(data[i].x1,data[i].y1);34 }35 }36 init();37
38 //创建粒子
39 functioncreateArc(x,y){40 cxt.save();41 cxt.beginPath();42 cxt.fillStyle='greenyellow';43 cxt.arc(x,y,2,0,Math.PI*2,false);44 cxt.closePath();45 cxt.fill();46 cxt.restore();47 }48
49 //创建线条
50 functioncreateLine(x1,y1,x2,y2){51 cxt.save();52 var lin=cxt.createLinearGradient(x1,y1,x2,y2);53 lin.addColorStop(0,'blue');54 lin.addColorStop(1,'green');55 cxt.lineWidth=1.5;56 cxt.strokeStyle=lin;57 cxt.beginPath();58 //连线
59 cxt.moveTo(x1,y1);60 cxt.closePath();61 cxt.lineTo(x2,y2);62 cxt.stroke();63 cxt.restore();64 }65
66 //粒子运动
67 functiondrawPath(){68 cxt.clearRect(0,0,window.innerWidth,window.innerHeight);//先清除之前的圆
69 for(var i=0;i
73 if(data[i].x1<0||data[i].x1>window.innerWidth) data[i].sX=-data[i].sX;74 if(data[i].y1<0||data[i].y1>window.innerHeight) data[i].sY=-data[i].sY;75 createArc(data[i].x1,data[i].y1);76 //利用勾股定理判断是否连线
77 for(var j=i+1;j
78 if(Math.pow(data[i].x1-data[j].x1,2)+Math.pow(data[i].y1-data[j].y1,2)<100*80)createLine(data[i].x1,data[i].y1,data[j].x1,data[j].y1);79 }80 }81 }82 setInterval(function(){83 drawPath()84 },1);85
86
87
88