この記事では主に、Zhihu ログイン ページの背景効果を簡単かつ迅速に実装するためのcanvasの関連知識を紹介します。これは非常に優れた参考値です。以下のエディターで見てみましょう
前書き
Zhihu のログインページを開くと、背景にアニメーション効果があり、非常に見栄えが良いことがわかります:
この効果を使用してくださいCanvas の実装は難しくありません。次に、この効果を段階的に説明して実現します。
分析
建設を開始する前に、まず効果がどのように機能するかを分析します。まず理解すべきことは、すべての線と円が動いているように見えますが、実際に動いているのは円だけであり、線は特定の条件を満たす 2 つの円を結んでいるだけであるということです。次に、円がどのように動くかを分析してみましょう。この効果から、各円は等速で直線的に移動しており、移動方向は異なることがわかります。垂直方向にはスピードがあります。最後に、円がキャンバスの境界から出ると、円は境界を出た端の反対側から再びキャンバスに入ります。これら 3 つの重要なポイントを理解すると、さらに明確になります。
練習
最初にキャンバスを作成します:
// 这里就简单地设置下背景色
次に、キャンバスコンテキストを取得し、いくつかの共通のプロパティを設定します
var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); canvas.width = document.documentElement.clientWidth; canvas.height = document.documentElement.clientHeight; context.fillStyle = "rgba(0, 0, 0, 0.08)"; context.strokeStyle = "rgba(0, 0, 0, 0.05)"; context.lineWidth = 0.5;
次に円を描き、円を描くには円の中心座標と半径が必要です。水平方向の速度と垂直方向の速度、およびこの情報は特定の条件を満たす必要があり、関数によって作成されます:
// 存放所有圆的数组，这里用balls var balls = []; function createBall() { // x坐标 var _x = Math.random() * canvas.width; // y坐标 var _y = Math.random() * canvas.height; // 半径 [0.01, 15.01] var _r = Math.random() * 15 + 0.01; // 水平速度 [±0.0, ±0.5] var _vx = Math.random() * 0.5 * Math.pow( -1, Math.floor(Math.random() * 2 + 1) ); // 垂直速度 [±0.0, ±0.5] var _vy = Math.random() * 0.5 * Math.pow( -1, Math.floor(Math.random() * 2 + 1) ); // 把每一个圆的信息存放到数组中 balls.push({ x: _x, y: _y, r: _r, vx: _vx, vy: _vy }); }
次に、自分の状況に応じて描画する必要がある円の数を選択します。 20 個あると仮定します。「快適に」を参照してください:
// 圆的数量 var num = 20; for(var i = 0; i < num; i++) { createBall(); }
円の情報が利用可能になったので、次のステップは、各フレームの円と線を描画し、render 関数を作成して、その中にあるすべての円を描画することです。関数:
for(var k = 0; k < num; k++) { context.save(); context.beginPath(); context.arc( balls[k].x, balls[k].y, balls[k].r, 0, Math.PI*2 ); context.fill(); context.restore(); }
次に、それぞれの 2 つの円の中心間の距離が特定の臨界値 (500 など) 未満であるかどうかを調べる必要があります。それが満たされている場合は、2 つの円の中心を接続します:
for(var i = 0; i < num; i++) { for(var j = i + 1; j < num; j++) { if( distance( balls[i], balls[j] ) < 500 ) { context.beginPath(); context.moveTo( balls[i].x, balls[i].y ); context.lineTo( balls[j].x, balls[j].y ); context.stroke(); } } }
ここでの距離関数は 2 点間の距離を計算することです。 距離:
function distance(point1, point2) { return Math.sqrt( Math.pow( (point1.x - point2.x), 2 ) + Math.pow( (point1.y - point2.y), 2 ) ); }
もう 1 つのステップは、円が境界値を超えているかどうかを判断することです。条件が満たされている場合は、反対側から再度入ってきます:
for(var k = 0; k < num; k++) { balls[k].x += balls[k].vx; balls[k].y += balls[k].vy; if( balls[k].x - balls[k].r > canvas.width ) { balls[k].x = 0 - balls[k].r; } if( balls[k].x + balls[k].r < 0 ) { balls[k].x = canvas.width + balls[k].r; } if( balls[k].y - balls[k].r > canvas.height ) { balls[k].y = 0 - balls[k].r; } if( balls[k].y + balls[k].r < 0 ) { balls[k].y = canvas.height + balls[k].r; } }
もちろん、もっと簡単にしたい場合は、円を超える範囲で円を削除して再生成するだけです:
if( balls[k].x - balls[k].r > canvas.width || balls[k].x + balls[k].r < 0 || balls[k].y - balls[k].r > canvas.height || balls[k].y + balls[k].r < 0) { balls.splice(k, 1); createBall(); }
このようにして、各フレームの詳細が完成します。最後のステップは、円を動かすことです:
(function loop(){ render(); requestAnimationFrame(loop); })();
この時点で、効果の全体が明らかになります。もちろん、効果をより繊細でカラフルにするために自分で解決できる詳細がたくさんあります。初心者に役立つことを願っています。
【関連おすすめ】
以上がCanvas を使用して Zhihu ログイン ページを実装するサンプル コードを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
