当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 实现简单的粒子连线

实现简单的粒子连线

2019年04月01日  | 移动技术网IT编程  | 我要评论

先看一看效果：

先分析粒子连线的实现步骤：

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>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网