キャンバスパーティクルアニメーション背景の実装例

接続効果なし:

接続による効果:

このような効果を実現するのは実際には非常に簡単で、大まかに次の手順に分けることができます。

まず、パーティクルの背景を表示する必要がある親要素にcanvasタグを作成し、ランダムなポイント座標を生成するときにwidthとheight height基準width使用する必要があります。 widthとheight親要素の幅と高さと同じです。

 // 親要素が bodyconst の場合 ele = document.body;const Canvas = document.createElement('canvas');canvas.width = ele.clientWidth;canvas.height = ele.clientHeight;// ele に Canvas タグを挿入.appendChild (キャンバス);

x 、 y 、 rateX (X 軸上の点の移動速度)、 rateY (Y 軸上の点の移動速度) を含む、 widthとheightを基準とした一定量の点座標情報をランダムに生成します。 、 rateXとrateY点の軌道の動きを決定します。

 const Points = [];// 点の座標をランダムに生成します。半径関数の最大値を指定する必要があります getPoint(radius) { const x = Math.ceil(Math.random() * this.width), //粒子の x 座標 y = Math.ceil(Math.random() * this.height), // 粒子の y 座標 r = +(Math.random() * this.radius).toFixed(4) 、//粒子の半径 rateX = +(Math.random() * 2 - 1).toFixed(4), // x 方向の粒子の移動速度 rateY = +(Math.random() * 2 - 1) .toFixed(4) ); // y 方向の粒子の移動速度 return { x, y, r, rateX, rateY };}// 100 点の座標情報をランダムに生成します (let i = 0; i < 100; i++) { ポイント.push(this.getPoint());}

生成された点配列をキャンバス上に描画します

 functiondrawPoints() { Points.forEach((item, i) => { ctx.beginPath(); ctx.arc(item.x, item.y, item.r, 0, Math.PI*2, false); ctx.fillStyle = '#fff'; //rateX と rateY に従ってポイントの座標を移動します if(item.x > 0 && item.x < width &&) item.y > 0 && item.y < height) { item.x += item.rateX * rate; item.y += item.rateY * rate; // パーティクルの動きが境界を超える場合、パーティクルを削除して新しいポイントを再生成します。

点配列を走査し、点の座標を比較します。2 点間の距離が特定の値より小さい場合、2 点間の距離に応じてlineWidth変化します。 、線が細くなります。

 // 2 点間の距離を計算します function dis(x1, y1, x2, y2) { var disX = Math.abs(x1 - x2), disY = Math.abs(y1 - y2) return Math.sqrt(disX *) disX + disY * disY);}functiondrawLines() { const len = Points.length; //ペアで中心座標を判定 for(let i = 0; i < len; i++) { for(let j = len - 1; j >= 0; j--) { const x1 = ポイント[i].x、y1 = ポイント[i].y、x2 = ポイント[j]。 x, y2 = Points[j].y, disPoint = dis(x1, y1, x2, y2); // 2 点間の距離が 150 未満の場合、線を描画します if(disPoint <= 150) { ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); // 2 点間の距離が大きいほど、線は細くなります。同様に ctx.lineWidth = 1 - disPoint / 距離; } }}

requestAnimationFrameを使用して、ループ内でdrawメソッドを呼び出します (描画メソッドには点と線の描画が含まれます)。同時に、 draw中にrateXとrateYに従って点の位置を変更します。

 // 描画関数を呼び出してアニメーションを開始します (functiondraw() { ctx.clearRect(0, 0, width, height);drawPoints(); // 線を描く必要がない場合は、次の行をキャンセルしてください。コード。drawLines(); window.requestAnimationFrame(draw);}());

完全なコードについては、https://github.com/PengJiyuan/particle-bg を参照してください。

私のGithub: https://github.com/PengJiyuan

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。