canvas簡(jiǎn)單快速的實(shí)現(xiàn)知乎登錄頁背景效果
前言
打開知乎的登錄頁，就可以看到其背景有一個(gè)動(dòng)效，看起來好像蠻不錯(cuò)的樣子：
這個(gè)效果使用canvas是不難實(shí)現(xiàn)的，接下來就一步一步地講解并實(shí)現(xiàn)這個(gè)效果。
分析
在動(dòng)工之前先分析這個(gè)效果到底是如何運(yùn)動(dòng)的。首先要理解的是雖然看起來好像所有線和圓都在運(yùn)動(dòng)，但實(shí)際上只有圓才是在運(yùn)動(dòng)的，而線只不過是把滿足一定條件的任意兩個(gè)圓連接在一起。那么接下來就分析圓是怎么運(yùn)動(dòng)的，從效果看，每個(gè)圓都是在做勻速直線運(yùn)動(dòng)，而且運(yùn)動(dòng)方向不一，通過物理相關(guān)知識(shí)可以得知，每一個(gè)圓在水平方向和垂直方向都有一個(gè)速度。最后是當(dāng)圓運(yùn)動(dòng)出畫布任一邊界的時(shí)候，這個(gè)圓會(huì)從出邊界的這條邊的對(duì)邊再次進(jìn)入畫布。把這三個(gè)關(guān)鍵點(diǎn)理解清楚了就清晰很多了。
實(shí)踐
先創(chuàng)建一個(gè)canvas畫布：
// 這里就簡(jiǎn)單地設(shè)置下背景色 <body style="background:#f7fafc;"> <canvas id="canvas" style="width: 100%; height: 100%;"></canvas> </body>
接著先獲取canvas的上下文環(huán)境并設(shè)置一些共用的屬性
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;
接下來繪制圓，那么繪制圓需要圓的圓心坐標(biāo)，半徑，水平方向的速度，垂直方向的速度，并且這些信息要滿足一定的條件，通過一個(gè)函數(shù)來創(chuàng)建：
// 存放所有圓的數(shù)組，這里用balls
var balls = [];
function createBall() {
// x坐標(biāo)
var _x = Math.random() * canvas.width;
// y坐標(biāo)
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) );
// 把每一個(gè)圓的信息存放到數(shù)組中
balls.push({
x: _x,
y: _y,
r: _r,
vx: _vx,
vy: _vy
});
}
然后根據(jù)自己的情況選擇需要繪制多少個(gè)圓，這里我假設(shè)有20個(gè)，看起來舒服一點(diǎn)：
// 圓的數(shù)量
var num = 20;
for(var i = 0; i < num; i++) {
createBall();
}
現(xiàn)在圓的信息都有了，下一步就是繪制每一幀的圓和線，創(chuàng)建一個(gè)render函數(shù)，然后在函數(shù)內(nèi)先繪制所有的圓出來：
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();
}
接著要遍歷每?jī)蓚€(gè)圓的圓心之間的距離是否小于某個(gè)臨界值（比如500），滿足則將這兩個(gè)圓的圓心連接起來：
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ù)就是計(jì)算兩點(diǎn)之間的距離：
function distance(point1, point2) {
return Math.sqrt( Math.pow( (point1.x - point2.x), 2 ) + Math.pow( (point1.y - point2.y), 2 ) );
}
還有一步就是判斷圓是否超出了邊界值，若滿足條件則從對(duì)邊再次進(jìn)來：
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;
}
}
當(dāng)然如果想簡(jiǎn)單點(diǎn)，只要圓超出就移除并重新生成一個(gè)圓即可：
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();
}
這樣每一幀繪制的細(xì)節(jié)就完成了，最后一步就是讓圓都運(yùn)動(dòng)起來：
(function loop(){
render();
requestAnimationFrame(loop);
})();
到此，整個(gè)效果就出來了。當(dāng)然這里面有很多細(xì)節(jié)可以自己琢磨琢磨，讓這個(gè)效果變得更加細(xì)膩多彩。希望對(duì)新手有所幫助。
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之棧詳解,本文講解了對(duì)棧的操作、對(duì)棧的實(shí)現(xiàn)實(shí)例等內(nèi)容,需要的朋友可以參考下2016-02-02
使用JavaScript計(jì)算前一天和后一天的思路詳解
這篇文章主要介紹了使用JavaScript計(jì)算前一天和后一天的思路，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12
AutoJS 是基于一個(gè)標(biāo)準(zhǔn)字典庫的文本輸入自動(dòng)完成 JavaScript 庫。Auto.js 是使用純 JS 實(shí)現(xiàn)的，沒有任務(wù)外部依賴，大小僅僅 6kb，本文給大家分享最新熱門腳本Autojs源碼，感興趣的朋友一起看看吧2021-05-05
javascript正則表達(dá)式模糊匹配IP地址功能示例
這篇文章主要介紹了javascript正則表達(dá)式模糊匹配IP地址功能,結(jié)合簡(jiǎn)單實(shí)例形式演示了JS模糊匹配IP地址的實(shí)現(xiàn)方法,涉及針對(duì)數(shù)字及字符串的相關(guān)正則判定與匹配操作技巧,需要的朋友可以參考下2017-01-01
JS實(shí)現(xiàn)的頁面自定義滾動(dòng)條效果
這篇文章主要介紹了JS實(shí)現(xiàn)的頁面自定義滾動(dòng)條效果,涉及JavaScript結(jié)合css設(shè)置頁面滾動(dòng)條樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
WebGL利用FBO完成立方體貼圖效果完整實(shí)例(附demo源碼下載)
這篇文章主要介紹了WebGL利用FBO完成立方體貼圖效果的方法,以完整實(shí)例形式分析了WebGL實(shí)現(xiàn)立方體貼圖的具體步驟與相關(guān)技巧,并附帶了demo源碼供讀者下載參考,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了JS快速掌握ES6的class用法，想了解ES6的同學(xué)，一定要看一下2021-05-05
微信小程序訪問豆瓣電影api的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序訪問豆瓣電影api的實(shí)現(xiàn)方法,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
今天小編就為大家分享一篇layui框架與SSM前后臺(tái)交互的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
button沒寫type=button會(huì)導(dǎo)致點(diǎn)擊時(shí)提交
點(diǎn)擊了一個(gè)彈窗中的按鈕，想到彈窗消失了，經(jīng)測(cè)試后發(fā)現(xiàn)button 沒寫type=button會(huì)導(dǎo)致點(diǎn)擊時(shí)提交2014-03-03