实现简单的粒子连线
程序员文章站
2023-04-05 22:09:35
先看一看效果: 先分析粒子连线的实现步骤: 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>