小編給大家分享一下利用canvas實現(xiàn)知乎登錄頁的案例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設、高性價比東臺網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式東臺網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設找我們，業(yè)務覆蓋東臺地區(qū)。費用合理售后完善，10年實體公司更值得信賴。

前言

打開知乎的登錄頁，就可以看到其背景有一個動效，看起來好像蠻不錯的樣子：

這個效果使用canvas是不難實現(xiàn)的，接下來就一步一步地講解并實現(xiàn)這個效果。

分析

在動工之前先分析這個效果到底是如何運動的。首先要理解的是雖然看起來好像所有線和圓都在運動，但實際上只有圓才是在運動的，而線只不過是把滿足一定條件的任意兩個圓連接在一起。那么接下來就分析圓是怎么運動的，從效果看，每個圓都是在做勻速直線運動，而且運動方向不一，通過物理相關知識可以得知，每一個圓在水平方向和垂直方向都有一個速度。最后是當圓運動出畫布任一邊界的時候，這個圓會從出邊界的這條邊的對邊再次進入畫布。把這三個關鍵點理解清楚了就清晰很多了。

實踐

先創(chuàng)建一個canvas畫布：

// 這里就簡單地設置下背景色

 

接著先獲取canvas的上下文環(huán)境并設置一些共用的屬性

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;

接下來繪制圓，那么繪制圓需要圓的圓心坐標，半徑，水平方向的速度，垂直方向的速度，并且這些信息要滿足一定的條件，通過一個函數(shù)來創(chuàng)建：

// 存放所有圓的數(shù)組，這里用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) );
 // 把每一個圓的信息存放到數(shù)組中
 balls.push({
 x: _x,
 y: _y,
 r: _r,
 vx: _vx,
 vy: _vy
 });
}

然后根據(jù)自己的情況選擇需要繪制多少個圓，這里我假設有20個，看起來舒服一點：

// 圓的數(shù)量
var num = 20;
for(var i = 0; i < num; i++) {
 createBall();
}

現(xiàn)在圓的信息都有了，下一步就是繪制每一幀的圓和線，創(chuàng)建一個render函數(shù)，然后在函數(shù)內先繪制所有的圓出來：

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 函數(shù)就是計算兩點之間的距離：

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();
}

這樣每一幀繪制的細節(jié)就完成了，最后一步就是讓圓都運動起來：

(function loop(){
 render();
 requestAnimationFrame(loop);
})();

以上是利用canvas實現(xiàn)知乎登錄頁的案例的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！

分享文章：利用canvas實現(xiàn)知乎登錄頁的案例-創(chuàng)新互聯(lián)
網(wǎng)頁網(wǎng)址：http://weahome.cn/article/peopi.html