javascript Canvas动态粒子连线

时间：2021-05-28

好久没写博客了，最近负责了公司年会的大屏签到、滚动抽奖、节目投票，整个项目做下来有惊也有喜。期间用到了Canvas制作动画，我这边就简单做了个动态粒子连线的例子与大家分享。

一、效果图

二、思路如下：

1.绘制随机区域的粒子，记录每个粒子x轴、y轴坐标以及x轴与y轴每次移动的距离

2.通过定时函数使得粒子进行移动，移动后判断是否超过界限，超过则将该粒子删除并生成一个新的粒子

3.判断所有粒子之间的距离，对给定距离的粒子进行连线。

三、代码如下：

<!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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章