Share the example code of using canvas to implement Zhihu login page
This article mainly introduces the relevant knowledge of canvas to easily and quickly implement the background effect of the Zhihu login page, which has a very good reference value. Let’s take a look at it with the editor
Preface
Open the login page of Zhihu, and you can see that there is an animation in the background, which looks pretty Nice look:
This effect is not difficult to achieve using canvas. Next, we will explain and achieve this effect step by step.
Analysis
Before starting construction, first analyze how the effect works. The first thing to understand is that although it seems that all lines and circles are moving, in fact only circles are moving, and lines are just connecting any two circles that meet certain conditions. Then let’s analyze how the circle moves. From the effect, each circle is moving in a straight line at a uniform speed, and the movement directions are different. From the relevant knowledge of physics, we can know that each circle moves in both the horizontal and vertical directions. There is a speed. Finally, when the circle moves out of any boundary of the canvas, the circle will enter the canvas again from the opposite side of the edge that exits the boundary. It will be much clearer once you understand these three key points.
Practice
Create a canvas first:
// 这里就简单地设置下背景色 <body style="background:#f7fafc;"> <canvas id="canvas" style="width: 100%; height: 100%;"></canvas> </body>
Then get the canvas context and set some common properties
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;Next draw a circle, then drawing a circle requires the center coordinates, radius, horizontal speed, and vertical speed of the circle, and this information must meet certain conditions, through a functionTo create:
// 存放所有圆的数组，这里用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
});
}Then choose how many circles you need to draw according to your own situation. Here I assume there are 20, which looks more comfortable:
// 圆的数量
var num = 20;
for(var i = 0; i < num; i++) {
createBall();
}Now the circle information is available , the next step is to draw circles and lines in each frame, create an render function, and then draw all the circles within the function:
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();
}Then we need to traverse every two Whether the distance between the centers of the circles is less than a certain critical value (such as 500), if it is satisfied, connect the centers of the two circles:
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();
}
}
}The distance function here is to calculate the distance between two points:
function distance(point1, point2) {
return Math.sqrt( Math.pow( (point1.x - point2.x), 2 ) + Math.pow( (point1.y - point2.y), 2 ) );
}The other step is to determine whether the circle exceeds the boundary value. If the conditions are met, then come in again from the opposite side:
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;
}
}Of course, if you want to make it simple, just remove the circle and restart it as soon as it exceeds the boundary value. Just generate a circle:
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();
}In this way, the details of each frame are completed. The last step is to make the circles move:
(function loop(){
render();
requestAnimationFrame(loop);
})();At this point, the entire effect is revealed. Of course, there are many details that you can figure out by yourself to make the effect more delicate and colorful. Hope it helps newbies.
【Related recommendations】
1. Free h5 online video tutorial
3. php.cn original html5 video tutorial
The above is the detailed content of Share the example code of using canvas to implement Zhihu login page. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1385
52
What should I do if I download other people's wallpapers after logging into another account on wallpaperengine?
Mar 19, 2024 pm 02:00 PM
When you log in to someone else's steam account on your computer, and that other person's account happens to have wallpaper software, steam will automatically download the wallpapers subscribed to the other person's account after switching back to your own account. Users can solve this problem by turning off steam cloud synchronization. What to do if wallpaperengine downloads other people's wallpapers after logging into another account 1. Log in to your own steam account, find cloud synchronization in settings, and turn off steam cloud synchronization. 2. Log in to someone else's Steam account you logged in before, open the Wallpaper Creative Workshop, find the subscription content, and then cancel all subscriptions. (In case you cannot find the wallpaper in the future, you can collect it first and then cancel the subscription) 3. Switch back to your own steam
How do I log in to my previous account on Xiaohongshu? What should I do if the original number is lost after it is reconnected?
Mar 21, 2024 pm 09:41 PM
With the rapid development of social media, Xiaohongshu has become a popular platform for many young people to share their lives and explore new products. During use, sometimes users may encounter difficulties logging into previous accounts. This article will discuss in detail how to solve the problem of logging into the old account on Xiaohongshu, and how to deal with the possibility of losing the original account after changing the binding. 1. How to log in to Xiaohongshu’s previous account? 1. Retrieve password and log in. If you do not log in to Xiaohongshu for a long time, your account may be recycled by the system. In order to restore access rights, you can try to log in to your account again by retrieving your password. The operation steps are as follows: (1) Open the Xiaohongshu App or official website and click the "Login" button. (2) Select "Retrieve Password". (3) Enter the mobile phone number you used when registering your account
Discuz background login problem solution revealed
Mar 03, 2024 am 08:57 AM
The solution to the Discuz background login problem is revealed. Specific code examples are needed. With the rapid development of the Internet, website construction has become more and more common, and Discuz, as a commonly used forum website building system, has been favored by many webmasters. However, precisely because of its powerful functions, sometimes we encounter some problems when using Discuz, such as background login problems. Today, we will reveal the solution to the Discuz background login problem and provide specific code examples. We hope to help those in need.
How to log in to Kuaishou PC version - How to log in to Kuaishou PC version
Mar 04, 2024 pm 03:30 PM
Recently, some friends have asked me how to log in to the Kuaishou computer version. Here is the login method for the Kuaishou computer version. Friends who need it can come and learn more. Step 1: First, search Kuaishou official website on Baidu on your computer’s browser. Step 2: Select the first item in the search results list. Step 3: After entering the main page of Kuaishou official website, click on the video option. Step 4: Click on the user avatar in the upper right corner. Step 5: Click the QR code to log in in the pop-up login menu. Step 6: Then open Kuaishou on your phone and click on the icon in the upper left corner. Step 7: Click on the QR code logo. Step 8: After clicking the scan icon in the upper right corner of the My QR code interface, scan the QR code on your computer. Step 9: Finally log in to the computer version of Kuaishou
How to log in to two devices on Quark
Feb 23, 2024 pm 10:55 PM
How to log in to two devices with Quark? Quark Browser supports logging into two devices at the same time, but most friends don’t know how to log in to two devices with Quark Browser. Next, the editor brings users Quark to log in to two devices. Method graphic tutorials, interested users come and take a look! Quark Browser usage tutorial Quark how to log in to two devices 1. First open the Quark Browser APP and click [Quark Network Disk] on the main page; 2. Then enter the Quark Network Disk interface and select the [My Backup] service function; 3. Finally, select [Switch Device] to log in to two new devices.
How to enter Baidu Netdisk web version? Baidu Netdisk web version login entrance
Mar 13, 2024 pm 04:58 PM
Baidu Netdisk can not only store various software resources, but also share them with others. It supports multi-terminal synchronization. If your computer does not have a client downloaded, you can choose to enter the web version. So how to log in to Baidu Netdisk web version? Let’s take a look at the detailed introduction. Baidu Netdisk web version login entrance: https://pan.baidu.com (copy the link to open in the browser) Software introduction 1. Sharing Provides file sharing function, users can organize files and share them with friends in need. 2. Cloud: It does not take up too much memory. Most files are saved in the cloud, effectively saving computer space. 3. Photo album: Supports the cloud photo album function, import photos to the cloud disk, and then organize them for everyone to view.
How to log in if Xiaohongshu only remembers the account? I just remember how to retrieve my account?
Mar 23, 2024 pm 05:31 PM
Xiaohongshu has now been integrated into the daily lives of many people, and its rich content and convenient operation methods make users enjoy it. Sometimes, we may forget the account password. It is really annoying to only remember the account but not be able to log in. 1. How to log in if Xiaohongshu only remembers the account? When we forget our password, we can log in to Xiaohongshu through the verification code on our mobile phone. The specific operations are as follows: 1. Open the Xiaohongshu App or the web version of Xiaohongshu; 2. Click the "Login" button and select "Account and Password Login"; 3. Click the "Forgot your password?" button; 4. Enter your account number. Click "Next"; 5. The system will send a verification code to your mobile phone, enter the verification code and click "OK"; 6. Set a new password and confirm. You can also use a third-party account (such as
115 Netdisk web version login entrance
Feb 23, 2024 pm 02:04 PM
115 Netdisk is a netdisk that can store many resources, so what is the login entrance for the 115 Netdisk web version? Users need to enter the URL https://115.com to enter the Netdisk, and they can use it after logging in. This 115 Netdisk web version login latest entrance sharing can tell you how to use this function, so take a look. 115 Netdisk web version login portal website sharing: https://115.com Detailed introduction: 1. First, you need to choose a way to log in to the Netdisk. 2. You can see the uploaded file in the upper right corner. 3. You can create a new folder here and switch between different modes. 4. You can add different tags to the file. 5. Users’ private messages can be seen on the website.
