最近、私はパーティクルグリッドアニメーションが非常にまばゆいばかりで見ました、そして私はそれを作りました、そしてそれは背景としてかなり良かったです。 CSDNは2mを超える写真をアップロードできないため、静的な画像をカットするだけです。
この効果を達成する方法を言い始めましょう：
まず第一に、もちろん、キャンバスを追加します。
<canvas id = canvas> </canvas>
次のスタイル：
<style> canvas：block：0;
上記のキャンバスのz -index：-1の役割は、いくつかの要素の背景の下に配置できることです。
キャンバスをブラウザ全体で満たすことができるようにするために、キャンバスの広い高さをブラウザと同じに設定する必要があります。
function getsize（）{w = canvas.width = window.innerwidth;上記のWとHは、ブラウザの幅を表します。
ブラウザの幅を取得し、次のステップは粒子を描画することです。
var opt = {particleamount：50、//粒子数デフォルトスピード：1、//粒子運動速度バリアントスピード：1、//粒子の動き速度：RGB（32,245,245）、//粒子の色の色Linecolor：RGB（32,245,245）、//グリッド接続の色Defaultradius：2、//粒子半径variantradius：2、//粒子半径の変数：200 //粒子間の最小距離};上記の速度変数と半径変数は、粒子のサイズと速度が正確に同じではないことを確認するためです。
次に、粒子を初期化するクラスを作成し、コメントを追加しました。
function partical（）{this.x = math.random（）*w; .speed = optionspeed + opt.variantspeed*math.random（）; color = opt.particlecolor; ）、// x軸yでの粒子速度y：this.speed * math.sin（this.directionangle）// y -axisでの粒子の速度} this.update = function（）{//粒子の更新機能this.border（）; moment this.y += this.vector.y; （this.x> = W || this.x <= 0）{//負{//上部と下の境界に達した場合、y軸の速度を元の負の数値に速度にします。サイズのサイズのブラウザウィンドウを変更する操作であり、ウィンドウのサイズの後の一部の粒子が非表示になります。 if（this.x <0）{this.x = 0;} if（this.y <0）{this.yy = 0;} this.draw = function（）{//粒子ctxの関数を描画します。 beginpath（）;1.各粒子の初期速度と角度がランダムに生成され、粒子の色は関連する設定オプションによって決定されます。
2。このベクトルは、粒子の移動方向を保存するために使用されます。これは、vector.xの場合、粒子が-1の場合、粒子は左に移動します。同様に、this.bector.yが負の場合、粒子は上方に移動し、正である場合、粒子は下に移動します。
this.updateは、各粒子の次の位置の座標を更新するために使用されます。まず、エッジ検出が実行されます。
3.ウィンドウズームは、粒子が境界を超えているため、エッジ検出関数をキャプチャできないようにするため、この状況を検出し、粒子の位置を現在のキャンバス境界にリセットするために一連のIFステートメントが必要です。
4.最後のステップでこれらのポイントをキャンバスに描きます。
粒子の粒子は書かれており、彼は彼を下に描きます。
function init（）{getsize（）;Opt.ParticalAmountの上記の初期化には、オブジェクトを初期化する粒子オブジェクトがありますが、以下は描画されていません。
関数loop（）{ctx.clearrect（0,0、w、h）; draw（）;} window.requestanimationframe（loop）;}loop（）関数が実行されるたびに、キャンバス上のコンテンツが削除され、粒子座標は粒子オブジェクトの更新（）関数を介して再計算され、粒子はdraw（）関数を介して描画されます。粒子オブジェクトの。以下は現時点での効果です。
ただし、ブラウザウィンドウのサイズが変更された後、一部の粒子は消えます。ブラウザのサイズが変更されるかどうかを監視する必要があります。
window.addeventlistener（resize、function（）{winresize（）}、false）;次に、ここでは、ブラウザを変更する回数が必要ですそして、より多くのパフォーマンスをテストすることができます。これは、この期間中にサイズのインシデントがトリガーされる場合、実際には複雑に聞こえます。
var particlle = []、h;高さ、}、delay）}の紹介があります。記事の上部に
このようにして、すべての粒子アニメーションが完了し、粒子間にラインを描くことができます。それらの間にそれを描きます。
では、2つの粒子間の距離を計算する方法では、中学校数学の最初のレッスン、ピロセブルの定理、正方形と正方形と正方形と正方形と直角三角形について考えることができます。 3番目の変更。
各粒子のx軸とy軸の座標がわかり、次の2つのポイント間の距離を計算し、関数を書き込み、次のように2つのポイントを渡すことができます。
関数getDistance（point1、point2）{return math.sqrt（math.pow（point1.x -point2.x、2） + math.pow（point1.y -point2.y、2））;}これで、2つのポイント間の距離を計算できるため、すべての粒子と他のすべての粒子間の距離を計算して、もちろん、すべての粒子の色の深さがまったく同じかどうかを判断します。少し醜いので、2つの粒子間の距離が近いほど、距離が増え、距離が遠く、透明性が高いほど、つながりの透明度を決定できます。特定の距離は表示されません。
function line point（hub）{for（i = 0; i <hub.length; i ++）{distance = getDistance（point、hub [i]）; （if（不透明> 0）{ctx.linewidth = 0.5; ctx.strokestyle = rgba（+line [0]+、+line [1]+、+line [2]+、+opacity+）; ctx.beginPath（） ; ctx（point.y）。 }}}}}}}}}上に送信される2つのパラメーターは、1つのポイントの配列であり、距離が距離を判断するために、不透明度/オプションを使用しますネガティブであり、次の判断は正規表現を使用する必要があります。
var line = option.linecolor.match（// d+/g）;
最後に、距離計算距離は、loop（）関数に連続的に循環します。
関数loop（）{ctx.clearrect（0,0、w、h）; draw（）;} for（let i = 0; i <particle.length; i ++）{//この環状線（particle [i]、particle）} window.requestanimationframe（loop）;}を追加する接続距離に多すぎるポイントを追加しすぎると（接続距離が行けすぎる）、アニメーションは運ばれないことを指摘する必要があります。ビューポートが狭くなると、粒子の移動速度を低下させるのが最善です。粒子のサイズが小さく、狭い空間の移動速度が速く見えます。
コード全体を表示します。
<！ 0;キャンバス）; var ctx = canvas.getContext（2d）; ）、//粒子の色linecolor：rgb（32,245,245）、//色をつなぐグリッドの色：2、//粒子半径variantradius：2、//粒子半径の可変マインド/粒子間の接続されたワイヤ} opt.linecolor.match（// d+/ g）; ; （）{getSize（getSize）; i <particle.length; lienepoint（particle [i]、particle）} window.requestanimationframe（loop）;} function liene point（point、hub）{for（let i = 0; i <hub.length; i ++）let dispance = getDistance（point、 hub [i]）let opages/opt.mindistance; +line [2]++ofacty+）; .closepath（）; ctx.stroke（）;}} function getDistance（point1、point2）{return math.sqrt（point1.x-pill2.x、2） + math.pow（pings1、y -point2.y、2）;} function getsize（）{canvas.width.innerwidth; x粒子の座標this.y = math.random（）*h;粒子の移動速度= math.floor（math.random（）*360）; .defaultradrad ius+math（）opt.variantradius。 x軸yの粒子：this.speed* sin（this.directionangle）// y -axisの粒子の速度}粒子this.border（）;次の瞬間this.y += this.vector.y; （this.x> = w || this.x <= 0）{//左と右の境界に到達した場合、x軸の速度を元の負の数に変換する場合、それらはすべて境界に到達しますか？ .vector.x *= -1;} if（this.y> = h || this.y <= 0）{//上限と下の境界に達した場合、y軸の速度は元のネガティブ数は、vector.y *= -1; 、そのため、彼はこれを表示できます。x= w;} if（this.y> h）{this.y = h;} if（this.x <0）{this.x = 0;} if（this.y <0）{this.y = 0;} this.draw = function（）{//描画粒子ctx.beginpath（） 0、math.pi * 2）;上記は、この記事のすべての内容です。