实现简单的粒子连线
程序员文章站
2022-05-18 22:55:53
先看一看效果： 先分析粒子连线的实现步骤： 1.初始化一张画布 2.创建粒子 1）创建粒子即在画布上画一个个小圆 2）初始化粒子的属性：数量：num 300；半径：3；圆形为随机排列且满足：x:0
先看一看效果：
先分析粒子连线的实现步骤：
1.初始化一张画布
2.创建粒子
1）创建粒子即在画布上画一个个小圆
2）初始化粒子的属性：数量：num 300；半径：3；圆形为随机排列且满足：x:0<x<浏览器的宽度；y:0<y<浏览器的高度；
3.粒子运动
这里要理解粒子运动的本质并不是粒子在运动，而是不断地重新绘画粒子，擦除之前的粒子；
4.粒子连线
1）是否构成连线的条件
2）构成条件的粒子之间连接成线
（接下来说一下一些步骤的实现，没按标准格式，文末有源码！）
先初始化一张画布
1 <canvas id="canvas"></canvas>
设置一下样式
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 function init(){
4 for(var i=0;i<num;i++){
5 data[i]={
6 x1: math.random() * window.innerwidth,//随机的粒子圆心坐标
7 y1: math.random() * window.innerheight,
8 sx: math.random() * 0.6 - 0.3,//取值范围0.3-0.3，是粒子运动的偏移量
9 sy: math.random() * 0.6 - 0.3
10 };
11 createarc(data[i].x1,data[i].y1);//调用创建粒子的函数
12 }
13 }
14 init();
创建粒子的函数
1 function createarc(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 function drawpath(){
2 cxt.clearrect(0,0,window.innerwidth,window.innerheight);//先清除之前的圆
3 for(var i=0;i<num;i++){
4 data[i].x1+=data[i].sx;
5 data[i].y1+=data[i].sy;
6 //边界值检测，如果坐标跑出窗口则坐标的偏移量变为负使得它反向
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<num;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 function createline(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 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>粒子连线</title>
6 <style>
7 body{
8 margin:0;
9 }
10 #canvas{
11 display: block;
12 background-color: black;
13 }
14 </style>
15 </head>
16 <canvas id="canvas"></canvas>
17 <script>
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 function init(){
26 for(var i=0;i<num;i++){
27 data[i]={
28 x1: math.random() * window.innerwidth,
29 y1: math.random() * window.innerheight,
30 sx: math.random() * 0.6 - 0.3,//取值范围0.3-0.3
31 sy: math.random() * 0.6 - 0.3
32 };
33 createarc(data[i].x1,data[i].y1);
34 }
35 }
36 init();
37
38 //创建粒子
39 function createarc(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 function createline(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 function drawpath(){
68 cxt.clearrect(0,0,window.innerwidth,window.innerheight);//先清除之前的圆
69 for(var i=0;i<num;i++){
70 data[i].x1+=data[i].sx;
71 data[i].y1+=data[i].sy;
72 //边界值检测
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<num;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 </script>
86 <body>
87 </body>
88 </html>
上一篇： Filter内容