Canvas实现动态粒子连线效果（附代码）

互联网 20-6-20

本篇文章给大家通过示例来介绍一下JS+Canvas制作动画，实现动态粒子连线效果的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

JS+Canvas制作动画，实现动态粒子连线效果

效果图如下

思路如下：

绘制随机区域的粒子，记录每个粒子x轴、y轴坐标以及x轴与y轴每次移动的距离
通过定时函数使得粒子进行移动，移动后判断是否超过界限，超过则将该粒子删除并生成一个新的粒子
判断所有粒子之间的距离，对给定距离的粒子进行连线。

代码如下：

<!DOCTYPE html> <html>  <head>  <meta charset="UTF-8">  <title>Canvas动态粒子连线</title>  </head>     <body>  <canvas id="myCanvas" style="border: 1px solid #ddd; display: block;margin: 20px auto;"></canvas>  <script>  var myCanvas = document.getElementById("myCanvas");  myCanvas.width = "800";  myCanvas.height = "800";  var cxt = myCanvas.getContext("2d");  cxt.fillStyle="#ddd";  var points =new Array();  //绘制60个粒子  for(var i=0;i<60;i++)  {  drawlizi();  }  setInterval(movelizi,100);     //绘制静态粒子  function drawlizi(){  var x = generate_random(3,797);  var y = generate_random(3,797);  var speedx = generate_random(-4,4);  var speedy = generate_random(-4,4);  //防止出现不移动的粒子  while(speedx==0&&speedy==0)  {  speedx = generate_random(-4,4);  speedy = generate_random(-4,4);  }  var point={  x_index:x,  y_index:y,  x_speed:speedx,  y_speed:speedy  };  points.push(point);  cxt.beginPath();  cxt.arc(x,y,3,0,360);  cxt.closePath();  cxt.fill();  }     //粒子移动  function movelizi(){  cxt.clearRect(0, 0,myCanvas.width,myCanvas.height);  for(var i=0;i<points.length;i++)  {  points[i].x_index = points[i].x_index+points[i].x_speed;  points[i].y_index = points[i].y_index+points[i].y_speed;  cxt.beginPath();  cxt.arc(points[i].x_index,points[i].y_index,3,0,360);  cxt.closePath();  cxt.fill();  //判断超过界限删除并再生  if((points[i].x_index<3||points[i].y_index<3)||(points[i].x_index>797||points[i].y_index<3)||(points[i].x_index<3||points[i].y_index>797)||(points[i].x_index>797||points[i].y_index>797)){  points.splice(i,1);  drawlizi();  }  }  //相近的粒子进行连线  for (var i=0;i<points.length;i++) {  for (var j=0;j<points.length;j++) {  if(i!=j)  {  var one_x = points[i].x_index;  var one_y = points[i].y_index;  var two_x = points[j].x_index;  var two_y = points[j].y_index;  // 根据两点间的距离公式，小于界限值便进行连线  var jl = Math.sqrt(Math.pow(one_x-two_x,2)+Math.pow(one_y-two_y,2));  if(jl<100)  {  cxt.strokeStyle="#ddd";  cxt.moveTo(one_x,one_y);  cxt.lineTo(two_x,two_y);  cxt.stroke();  }  }  }  }  }  //生成两个数之间的随机数  function generate_random(min,max){  return Math.floor(Math.random()*(max-min)+min);  }   </script>  </body>    </html>

更多炫酷的页面特效，可访问：js代码特效栏目！！

以上就是Canvas实现动态粒子连线效果（附代码）的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： JavaScript