欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

实现简单的粒子连线

程序员文章站 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>