分享利用canvas實現知乎登入頁的實例代碼-H5教程-PHP中文網

首頁

web前端

H5教程

分享利用canvas實現知乎登入頁的實例代碼

零下一度

May 09, 2017 am 11:00 AM

本篇文章主要介紹了canvas簡單快速實現知乎登入頁背景效果的相關知識，具有很好的參考價值。下面跟著小編一起來看下吧

前言

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

這個效果使用canvas是不難實現的，接下來就一步一步地講解並實現這個效果。

分析

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

實作

先建立一個canvas畫布：

// 这里就简单地设置下背景色
<body style="background:#f7fafc;">
 <canvas id="canvas" style="width: 100%; height: 100%;"></canvas>
</body>

接著先取得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);
})();

到此，整個效果就出來了。當然這裡面有很多細節可以自己琢磨琢磨，讓這個效果變得更加細膩多彩。希望對新手有幫助。

【相關推薦】

1. 免費h5線上影片教學

2. HTML5 完整版手冊

#3. php.cn原始html5影片教學

以上是分享利用canvas實現知乎登入頁的實例代碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5代碼示例：實際應用和教程Apr 25, 2025 am 12:10 AM

H5提供了多種新特性和功能，極大地增強了前端開發的能力。 1.多媒體支持：通過和元素嵌入媒體，無需插件。 2.畫布（Canvas）：使用元素動態渲染2D圖形和動畫。 3.本地存儲：通過localStorage和sessionStorage實現數據持久化存儲，提升用戶體驗。

H5和HTML5之間的連接：相似性和差異Apr 24, 2025 am 12:01 AM

H5和HTML5是不同的概念：HTML5是HTML的一個版本，包含新元素和API；H5是基於HTML5的移動應用開發框架。 HTML5通過瀏覽器解析和渲染代碼，H5應用則需要容器運行並通過JavaScript與原生代碼交互。

H5代碼的基礎：密鑰元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的關鍵元素包括、、、、、等，用於構建現代網頁。 1.定義頭部內容，2.用於導航鏈接，3.表示獨立文章內容，4.組織頁面內容，5.展示側邊欄內容，6.定義頁腳，這些元素增強了網頁的結構和功能性。

HTML5和H5：了解常見用法Apr 22, 2025 am 12:01 AM

HTML5和H5沒有區別，H5是HTML5的簡稱。 1.HTML5是HTML的第五個版本，增強了網頁的多媒體和交互功能。 2.H5常用於指代基於HTML5的移動網頁或應用，適用於各種移動設備。

HTML5：現代網絡的基礎（H5）Apr 21, 2025 am 12:05 AM

HTML5是超文本標記語言的最新版本，由W3C標準化。 HTML5引入了新的語義化標籤、多媒體支持和表單增強，提升了網頁結構、用戶體驗和SEO效果。 HTML5引入了新的語義化標籤，如、、、等，使網頁結構更清晰，SEO效果更好。 HTML5支持多媒體元素和，無需第三方插件，提升了用戶體驗和加載速度。 HTML5增強了表單功能，引入了新的輸入類型如、等，提高了用戶體驗和表單驗證效率。

H5代碼：編寫清潔有效的HTML5Apr 20, 2025 am 12:06 AM

如何寫出乾淨高效的HTML5代碼？答案是通過語義化標籤、結構化代碼、性能優化和避免常見錯誤。 1.使用語義化標籤如、等，提升代碼可讀性和SEO效果。 2.保持代碼結構化和可讀性，使用適當縮進和註釋。 3.優化性能，通過減少不必要的標籤、使用CDN和壓縮代碼。 4.避免常見錯誤，如標籤未閉合，確保代碼有效性。