分享利用canvas实现知乎登录页的实例代码
本篇文章主要介绍了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 完整版手册
Atas ialah kandungan terperinci 分享利用canvas实现知乎登录页的实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1386
52
Apakah yang perlu saya lakukan jika saya memuat turun kertas dinding orang lain selepas log masuk ke akaun lain pada mesin kertas dinding?
Mar 19, 2024 pm 02:00 PM
Apabila anda log masuk ke akaun stim orang lain pada komputer anda, dan akaun orang lain itu kebetulan mempunyai perisian kertas dinding, stim akan memuat turun kertas dinding yang dilanggan ke akaun orang lain secara automatik selepas bertukar kembali ke akaun anda sendiri Pengguna boleh menyelesaikan masalah ini dengan mematikan penyegerakan awan wap. Apa yang perlu dilakukan jika enjin kertas dinding memuat turun kertas dinding orang lain selepas log masuk ke akaun lain 1. Log masuk ke akaun stim anda sendiri, cari penyegerakan awan dalam tetapan, dan matikan penyegerakan awan stim. 2. Log masuk ke akaun Steam orang lain yang anda log masuk sebelum ini, buka Bengkel Kreatif Kertas Dinding, cari kandungan langganan, dan kemudian batalkan semua langganan. (Sekiranya anda tidak dapat mencari kertas dinding pada masa hadapan, anda boleh mengumpulnya dahulu dan kemudian membatalkan langganan) 3. Tukar semula ke wap anda sendiri
Bagaimanakah saya boleh log masuk ke akaun saya sebelum ini di Xiaohongshu? Apakah yang perlu saya lakukan jika nombor asal hilang selepas ia ditukar?
Mar 21, 2024 pm 09:41 PM
Dengan perkembangan pesat media sosial, Xiaohongshu telah menjadi platform popular untuk ramai anak muda untuk berkongsi kehidupan mereka dan meneroka produk baharu. Semasa penggunaan, kadangkala pengguna mungkin menghadapi kesukaran untuk log masuk ke akaun sebelumnya. Artikel ini akan membincangkan secara terperinci cara menyelesaikan masalah log masuk ke akaun lama di Xiaohongshu, dan cara menangani kemungkinan kehilangan akaun asal selepas menukar pengikatan. 1. Bagaimana untuk log masuk ke akaun sebelumnya Xiaohongshu? 1. Dapatkan kata laluan dan log masuk. Jika anda tidak log masuk ke Xiaohongshu untuk masa yang lama, akaun anda mungkin dikitar semula oleh sistem. Untuk memulihkan hak akses, anda boleh cuba log masuk ke akaun anda sekali lagi dengan mendapatkan semula kata laluan anda. Langkah-langkah operasi adalah seperti berikut: (1) Buka Aplikasi Xiaohongshu atau laman web rasmi dan klik butang "Log Masuk". (2) Pilih "Retrieve Password". (3) Masukkan nombor telefon bimbit yang anda gunakan semasa mendaftar akaun anda
Discuz penyelesaian masalah log masuk latar belakang didedahkan
Mar 03, 2024 am 08:57 AM
Penyelesaian masalah log masuk latar belakang Discuz didedahkan. ramai webmaster. Walau bagaimanapun, dengan tepat kerana fungsinya yang berkuasa, kadangkala kami menghadapi beberapa masalah semasa menggunakan Discuz, seperti masalah log masuk latar belakang. Hari ini, kami akan mendedahkan penyelesaian kepada masalah log masuk latar belakang Discuz dan memberikan contoh kod khusus, dengan harapan dapat membantu mereka yang memerlukan
Cara log masuk ke versi PC Kuaishou - Cara log masuk ke versi PC Kuaishou
Mar 04, 2024 pm 03:30 PM
Baru-baru ini, beberapa rakan telah bertanya kepada saya bagaimana untuk log masuk ke versi komputer Kuaishou Berikut adalah kaedah log masuk untuk versi komputer Kuaishou Rakan yang memerlukannya boleh datang dan mengetahui lebih lanjut. Langkah 1: Mula-mula, cari tapak web rasmi Kuaishou di Baidu dalam penyemak imbas komputer anda. Langkah 2: Pilih item pertama dalam senarai hasil carian. Langkah 3: Selepas memasuki halaman utama laman web rasmi Kuaishou, klik pada pilihan video. Langkah 4: Klik pada avatar pengguna di sudut kanan atas. Langkah 5: Klik kod QR untuk log masuk dalam menu log masuk pop timbul. Langkah 6: Kemudian buka Kuaishou pada telefon anda dan klik pada ikon di sudut kiri atas. Langkah 7: Klik pada logo kod QR. Langkah 8: Selepas mengklik ikon imbasan di penjuru kanan sebelah atas antara muka kod QR Saya, imbas kod QR pada komputer anda. Langkah 9: Akhirnya log masuk ke versi komputer Kuaishou
Bagaimana untuk log masuk ke dua peranti pada Quark
Feb 23, 2024 pm 10:55 PM
Bagaimana untuk log masuk ke dua peranti dengan Quark Browser menyokong log masuk ke dua peranti pada masa yang sama, tetapi kebanyakan rakan tidak tahu cara untuk log masuk ke dua peranti dengan Quark Browser Seterusnya, editor membawa pengguna Quark untuk log masuk kepada dua peranti tutorial grafik kaedah, pengguna yang berminat datang dan lihat! Tutorial penggunaan Pelayar Quark Cara log masuk ke dua peranti 1. Mula-mula buka APP Pelayar Quark dan klik [Cakera Rangkaian Quark] pada halaman utama 2. Kemudian masukkan antara muka Cakera Rangkaian Quark dan pilih fungsi perkhidmatan [My Backup]. ; 3. Akhir sekali, pilih [Tukar Peranti] untuk log masuk ke dua peranti baharu.
Bagaimana untuk memasukkan versi web Baidu Netdisk? Pintu masuk log masuk versi web Baidu Netdisk
Mar 13, 2024 pm 04:58 PM
Baidu Netdisk bukan sahaja boleh menyimpan pelbagai sumber perisian, tetapi juga berkongsinya dengan orang lain Ia menyokong penyegerakan berbilang terminal Jika komputer anda tidak memuat turun klien, anda boleh memilih untuk memasuki versi web. Jadi bagaimana untuk log masuk ke versi web Baidu Netdisk? Mari kita lihat pengenalan terperinci. Pintu masuk masuk versi web Baidu Netdisk: https://pan.baidu.com (salin pautan ke pelayar untuk dibuka) Pengenalan perisian 1. Perkongsian Menyediakan fungsi perkongsian fail, pengguna boleh menyusun fail dan berkongsi dengan rakan-rakan yang memerlukan. 2. Awan: Ia tidak mengambil terlalu banyak memori Kebanyakan fail disimpan dalam awan, dengan berkesan menjimatkan ruang komputer. 3. Album foto: Menyokong fungsi album foto awan, mengimport foto ke cakera awan, dan kemudian menyusunnya untuk dilihat oleh semua orang. ,
Bagaimana untuk log masuk jika Xiaohongshu hanya mengingati akaun tersebut? Saya hanya ingat bagaimana untuk mendapatkan semula akaun saya?
Mar 23, 2024 pm 05:31 PM
Xiaohongshu kini telah disepadukan ke dalam kehidupan seharian ramai orang, dan kandungannya yang kaya serta kaedah operasi yang mudah membuatkan pengguna menikmatinya. Kadang-kadang, kita mungkin terlupa kata laluan akaun Memang menjengkelkan untuk hanya mengingati akaun tetapi tidak boleh log masuk. 1. Bagaimana untuk log masuk jika Xiaohongshu hanya mengingati akaun tersebut? Apabila kami terlupa kata laluan kami, kami boleh log masuk ke Xiaohongshu melalui kod pengesahan pada telefon bimbit kami. Operasi khusus adalah seperti berikut: 1. Buka Aplikasi Xiaohongshu atau versi web Xiaohongshu 2. Klik butang "Log Masuk" dan pilih "Log Masuk Akaun dan Kata Laluan" 3. Klik butang "Lupa kata laluan anda?" . Masukkan nombor akaun anda Klik "Seterusnya"; 5. Sistem akan menghantar kod pengesahan ke telefon bimbit anda, masukkan kod pengesahan dan klik "OK"; Anda juga boleh menggunakan akaun pihak ketiga (seperti
Apakah yang perlu saya lakukan jika saya tidak boleh log masuk ke akaun saya di Google Chrome? Penyelesaian mengapa akaun Google Chrome tidak boleh dilog masuk
Mar 13, 2024 pm 02:10 PM
Apakah yang perlu saya lakukan jika saya tidak boleh log masuk ke akaun saya di Google Chrome? Apabila ramai pengguna menggunakan perisian ini, beberapa fungsi memerlukan pengguna untuk log masuk ke akaun Google mereka sebelum mereka boleh menggunakannya, tetapi mereka telah mencuba banyak kali tetapi gagal untuk log masuk Berdepan dengan masalah ini, ramai pengguna tidak tahu bagaimana menyelesaikannya, jadi Dalam isu ini, editor di sini untuk berkongsi penyelesaian dengan anda, saya berharap kandungan tutorial perisian hari ini dapat membantu semua orang. Penyelesaiannya adalah seperti berikut: 1. Klik pada pelayar pada desktop, dan selepas membukanya, anda akan melihat sesuatu seperti ini. 2. Jika log masuk muncul pada masa ini, klik jika anda tidak dapat melihatnya, klik sudut kanan atas. 3. Klik Log Masuk, kemudian masukkan nombor akaun anda Anda tidak perlu memasukkan akaun selepas @, dan klik Seterusnya. 4. Masukkan kata laluan Apabila anda melihat gesaan ini, klik Dayakan
