本篇文章主要介紹了canvas簡單快速實現知乎登入頁背景效果的相關知識，具有很好的參考價值。下面跟著小編一起來看下吧
前言
開啟知乎的登入頁，就可以看到其背景有一個動效，看起來好像蠻不錯的樣子：
這個效果使用canvas是不難實現的，接下來就一步一步地講解並實現這個效果。
分析
在動工之前先分析這個效果到底是如何運動的。首先要理解的是雖然看起來好像所有線和圓都在運動，但實際上只有圓才是在運動的，而線只不過是把滿足一定條件的任兩個圓連接在一起。那麼接下來就分析圓是怎麼運動的，從效果看，每個圓都是在做勻速直線運動，而且運動方向不一，透過物理相關知識可以得知，每一個圓在水平方向和垂直方向都有一個速度。最後是當圓運動出畫布任一邊界的時候，這個圓會從出邊界的這條邊的對邊再次進入畫布。把這三個關鍵點理解清楚了就清晰很多了。
實作
先建立一個canvas畫布：
// 这里就简单地设置下背景色
接著先取得canvas的上下文環境並設定一些共用的屬性
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(); }
接著要遍歷每兩個圓的圓心之間的距離是否小於某個臨界值（例如500），滿足則將這兩個圓的圓心連接起來：
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(); } } }
這裡的distance 函數就是計算兩點之間的距離：
function distance(point1, point2) { return Math.sqrt( Math.pow( (point1.x - point2.x), 2 ) + Math.pow( (point1.y - point2.y), 2 ) ); }
還有一步就是判斷圓是否超出了邊界值，若滿足條件則從對邊再次進來：
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實現知乎登入頁的實例代碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
