Share the example code of using canvas to implement Zhihu login page-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

Share the example code of using canvas to implement Zhihu login page

零下一度

May 09, 2017 am 11:00 AM

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

2. HTML5 full version manual

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

《阴阳师》茨木童子典藏皮肤登录即领，禅心云外镜新皮肤即将上线！Jan 05, 2024 am 10:42 AM

山野间万鬼嘶鸣，隐没兵刃交接之声，越岭奔赴而来的鬼将，心中战意汹涌，以炎火为号，率百鬼冲锋迎战。【炽焱百炼•茨木童子典藏皮肤上线】鬼角炽焰怒燃，鎏金眼眸迸发桀骜战意，白玉甲片装点战袍，彰显大妖不羁狂放的气势。雪白飘扬的袖摆上，赤焰攀附交织，金纹烙印其中，燃点一片绯艳妖异色彩。妖力凝聚而成的鬼火咆哮而至，烈焰令群峦为之震动，炼狱间归来的妖鬼啊，一同惩戒进犯之人吧。【专属动态头像框•炽焱百炼】【专属插画•焰火将魂】【传记鉴赏】【获取方式】茨木童子典藏皮肤·炽焱百炼将于12月28日维护后上架皮肤商店，

如何在 Windows PC 上修复 Steam 登录错误 E84Jun 28, 2023 am 08:20 AM

Steam登录错误E84是Steam用户在多次登录尝试中遇到的常见登录。如果您无法登录Steam，则无法执行任何有用的操作。如果您不先处理此E84登录错误，您将面临大量问题。初步解决方法–1.如果您是第一次在Steam中遇到此E84错误，重新启动系统可能会修复它。关闭Steam应用程序。将其从系统托盘中退出。然后，重新启动系统并重试整个过程。2.检查互联网连接是否有故障。如果您的互联网连接速度较慢，Steam登录可能会引发E84。修复1–将noreactlogin添加到Steam可执行文件您必须

1.1.1.1上网认证系统怎么登录Apr 20, 2023 am 10:44 AM

1.1.1.1上网认证系统登录方法：1、搜索校园网无线信号并连接；2、打开浏览器，在弹出的身份验证界面选择“自助服务”；3、输入用户名和初始密码进行登录；4、完善个人信息并设置为强密码即可。

教您win7登陆了怎么查看电脑密码Jul 11, 2023 pm 08:41 PM

在我们使用win7操作系统的过程中，我们通常会给电脑设置一个密码。最近就有小伙伴想要了解win7登陆了怎么查看电脑密码，其实win7查看电脑密码的方法非常简单。今天小编就来告诉大家win7查看电脑密码怎么操作。下面就让我们一起来看看吧！win7查看电脑密码的方法：1、按下win键+r键，输入rundll32netplwiz.dll,UsersRunDll，然后点击确定。2、取消勾选“要使用本机，用户必须输入用户名和密码”3、取消后点击确定，在弹出的对话框中不要输入你想让电脑每次自动登录的账户和密

尝试这个简单的 3 步解决方案，解决无法登录Microsoft帐户的问题Sep 07, 2023 am 10:09 AM

您无法登录Microsoft帐户的原因有多种。虽然它很少发生，但当它发生时，它可能会令人沮丧。例如，在Windows11中，发生这种情况的原因之一是由于MicrosoftStore内置应用程序有时会损坏并停止正常工作。例如，这位Reddit用户遇到了这个问题，其他用户通过一个简单的解决方案来拯救，该解决方案似乎最终奏效了。为了能够重新登录Microsoft帐户，需要重新安装所有内置的Microsoft应用商店应用。事情是这样的。以管理员身份打开Powershell应用。输入以下命令：Get-Ap

如何在 Windows 11/10 上安装 GitHub CopilotOct 21, 2023 pm 11:13 PM

GitHubCopilot是编码人员的下一个级别，它基于AI的模型可以成功预测和自动完成您的代码。但是，您可能想知道如何在您的设备上加入这个AI天才，以便您的编码变得更加容易！但是，使用GitHub并不是很容易，初始设置过程是一个棘手的过程。因此，我们创建了这个分步教程，介绍如何在Windows11、10上的VSCode中安装和实现GitHubCopilot。如何在Windows上安装GitHubCopilot此过程有几个步骤。因此，请立即执行以下步骤。步骤1–您必须在计算机上安装最新版本的可视

如何通过JavaScript实现免登录功能Jun 15, 2023 pm 10:43 PM

在许多网络应用程序中，登录是一项必须的操作。然而，在一些情况下，尤其是在一些无需提供极高安全性的应用程序中，我们可以实现免登录功能，减轻用户登录的时间和操作次数。下面我们将介绍如何通过Javascript实现免登录功能。步骤一：使用cookie存储登录状态Cookies是一种为Web提供的数据存储方式，它可以将数据存储在用户本地计算机中。通过设置cookie

修复 OneDrive 中的“您的帐户目前无法使用”错误提示Sep 13, 2023 am 08:33 AM

尝试在Windows中登录也不起作用。然而，对Microsoft账户的检查显示，它没有问题。我能够在Windows和Web上登录和注销Microsoft帐户，并且能够访问所有服务。只有OneDrive似乎受到影响。Microsoft的错误消息，就像大多数时候一样，不是很有帮助，因为它太通用了，没有多大用处。它以以下语句开头：“你的OneDrive或配置文件可能会被暂时阻止，因为它遇到了异常大量的流量。在这种情况下，该块将在24小时后删除”接下来是另一句话，列出了可能导致临时帐户暂停的其他原因：“

See all articles

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

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Repo: How To Revive Teammates

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

3 weeks agoByDDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

3 weeks agoByDDD

Hot Tools

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),