Heim > Artikel > Web-Frontend > Canvas implementiert einen dynamischen Partikelverbindungseffekt (mit Code)

Canvas implementiert einen dynamischen Partikelverbindungseffekt (mit Code)

青灯夜游nach vorne: 2020-06-20 09:25:493681Durchsuche

In diesem Artikel erfahren Sie anhand von Beispielen, wie Sie mit JS+Canvas Animationen erstellen und dynamische Partikelverbindungseffekte erzielen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

JS+Canvas erstellt Animationen, um einen dynamischen Partikelverbindungseffekt zu erzielen

Das Effektbild ist wie folgt

Canvas implementiert einen dynamischen Partikelverbindungseffekt (mit Code)

Die Idee ist wie folgt:

Partikel in zufällige Bereiche zeichnen, die x-Achse aufzeichnen, y- Achsenkoordinaten und x-Achse jedes Partikels Der Abstand von jeder Bewegung der y-Achse
Verwendet eine Zeitfunktion, um das Partikel zu bewegen. Nach der Bewegung wird beurteilt, ob es sich bewegt überschreitet den Grenzwert. Wenn der Grenzwert überschritten wird, wird das Partikel gelöscht und ein neues Partikel erzeugt
Beurteilen Sie den Abstand zwischen allen Partikeln und verbinden Sie Partikel in einem bestimmten Abstand.

Der Code lautet wie folgt:

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

Weitere coole Seitenspezialeffekte finden Sie unter: JS-Code-Spezialeffekte Kolumne! !

Das obige ist der detaillierte Inhalt vonCanvas implementiert einen dynamischen Partikelverbindungseffekt (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Native JS verwendet Transformation, um einen unendlichen Scrolleffekt des Banners zu erzielenNächster Artikel：Native JS verwendet Transformation, um einen unendlichen Scrolleffekt des Banners zu erzielen

In Verbindung stehende Artikel

Mehr sehen