interface Web
Tutoriel H5
Partagez l'exemple de code d'utilisation de Canvas pour implémenter la page de connexion Zhihu
Partagez l'exemple de code d'utilisation de Canvas pour implémenter la page de connexion Zhihu
Cet article présente principalement les connaissances pertinentes de canvas pour implémenter facilement et rapidement l'effet d'arrière-plan de la page de connexion Zhihu, qui a une très bonne valeur de référence. Jetons-y un coup d'œil avec l'éditeur ci-dessous
Avant-propos
Lorsque vous ouvrez la page de connexion de Zhihu, vous pouvez voir qu'il y a une animation en arrière-plan, ce qui a l'air plutôt cool Joli look :
Cet effet n'est pas difficile à obtenir en utilisant la toile. Ensuite, nous expliquerons et obtiendrons cet effet étape par étape.
Analyse
Avant de commencer le travail, analysez le fonctionnement de l'effet. La première chose à comprendre est que même s’il semble que toutes les lignes et tous les cercles se déplacent, en réalité seuls les cercles bougent, et les lignes ne font que relier deux cercles quelconques qui remplissent certaines conditions. Analysons ensuite comment le cercle se déplace. D'après l'effet, chaque cercle se déplace en ligne droite à une vitesse uniforme, et les directions de mouvement sont différentes. D'après les connaissances pertinentes en physique, nous pouvons savoir que chaque cercle se déplace à la fois horizontalement. et les directions verticales. Il y a une vitesse. Enfin, lorsque le cercle quitte une limite du canevas, le cercle entre à nouveau dans le canevas par le côté opposé du bord qui sort de la limite. Ce sera beaucoup plus clair une fois que vous aurez compris ces trois points clés.
Entraînez-vous
Créez d'abord un canevas :
// 这里就简单地设置下背景色 <body style="background:#f7fafc;"> <canvas id="canvas" style="width: 100%; height: 100%;"></canvas> </body>
Ensuite, récupérez le contexte du canevas et définissez quelques attributs communs
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;Dessinez ensuite un cercle, puis dessiner un cercle nécessite les coordonnées du centre, le rayon, la vitesse horizontale et la vitesse verticale du cercle, et ces informations doivent remplir certaines conditions, via une Fonction pour créer :
// 存放所有圆的数组，这里用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
});
}Choisissez ensuite le nombre de cercles que vous devez dessiner en fonction de votre propre situation. Ici, je suppose qu'il y en a 20, ce qui semble plus confortable :
// 圆的数量
var num = 20;
for(var i = 0; i < num; i++) {
createBall();
}Maintenant. que les informations sur les cercles sont disponibles, l'étape suivante consiste à dessiner des cercles et des lignes pour chaque image, à créer une fonction render, puis à dessiner tous les cercles dans la fonction :
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();
}Ensuite, il faut parcourir si la distance entre les centres de chacun des deux cercles est inférieure à une certaine valeur critique (telle que 500). Si elle est satisfaite, reliez les centres des deux cercles :
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();
}
}
}Ici, la fonction distance consiste à calculer la distance entre deux points :
function distance(point1, point2) {
return Math.sqrt( Math.pow( (point1.x - point2.x), 2 ) + Math.pow( (point1.y - point2.y), 2 ) );
}L'autre étape consiste à déterminer si le cercle dépasse la valeur limite. Si la condition est remplie, il reviendra. du côté opposé :
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;
}
}Bien sûr, si vous voulez faire plus simple, il suffit de supprimer et régénérer un cercle tant que le cercle dépasse :
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();
}De cette façon , les détails du dessin de chaque cadre sont terminés et la dernière étape consiste à faire bouger les cercles :
(function loop(){
render();
requestAnimationFrame(loop);
})();À ce stade, tout l'effet est révélé. Bien sûr, il existe de nombreux détails que vous pouvez comprendre vous-même pour rendre l'effet plus délicat et coloré. J'espère que cela aidera les débutants.
[Recommandations associées]
1. Tutoriel vidéo en ligne h5 gratuit
2.Manuel de la version complète HTML5
3. Tutoriel vidéo html5 original php.cn
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Que dois-je faire si je télécharge les fonds d'écran d'autres personnes après m'être connecté à un autre compte sur WallpaperEngine ?
Mar 19, 2024 pm 02:00 PM
Lorsque vous vous connectez au compte Steam de quelqu'un d'autre sur votre ordinateur et que le compte de cette autre personne dispose d'un logiciel de fond d'écran, Steam téléchargera automatiquement les fonds d'écran abonnés au compte de l'autre personne après être revenu à votre propre compte. Les utilisateurs peuvent résoudre ce problème en. désactiver la synchronisation du cloud Steam. Que faire si WallpaperEngine télécharge les fonds d'écran d'autres personnes après s'être connecté à un autre compte 1. Connectez-vous à votre propre compte Steam, recherchez la synchronisation cloud dans les paramètres et désactivez la synchronisation cloud Steam. 2. Connectez-vous au compte Steam de quelqu'un d'autre auquel vous vous êtes connecté auparavant, ouvrez Wallpaper Creative Workshop, recherchez le contenu de l'abonnement, puis annulez tous les abonnements. (Si vous ne trouvez pas le fond d'écran à l'avenir, vous pouvez d'abord le récupérer, puis annuler l'abonnement) 3. Revenez à votre propre Steam
Comment puis-je me connecter à mon ancien compte sur Xiaohongshu ? Que dois-je faire si le numéro d'origine est perdu après sa reconnexion ?
Mar 21, 2024 pm 09:41 PM
Avec le développement rapide des médias sociaux, Xiaohongshu est devenue une plateforme populaire permettant à de nombreux jeunes de partager leur vie et d'explorer de nouveaux produits. Pendant l'utilisation, les utilisateurs peuvent parfois rencontrer des difficultés pour se connecter aux comptes précédents. Cet article expliquera en détail comment résoudre le problème de connexion à l'ancien compte sur Xiaohongshu et comment gérer la possibilité de perdre le compte d'origine après avoir modifié la liaison. 1. Comment se connecter au compte précédent de Xiaohongshu ? 1. Récupérez le mot de passe et connectez-vous. Si vous ne vous connectez pas à Xiaohongshu pendant une longue période, votre compte peut être recyclé par le système. Afin de restaurer les droits d'accès, vous pouvez tenter de vous reconnecter à votre compte en récupérant votre mot de passe. Les étapes de fonctionnement sont les suivantes : (1) Ouvrez l'application Xiaohongshu ou le site officiel et cliquez sur le bouton « Connexion ». (2) Sélectionnez « Récupérer le mot de passe ». (3) Entrez le numéro de téléphone mobile que vous avez utilisé lors de l'enregistrement de votre compte
La solution au problème de connexion en arrière-plan Discuz révélée
Mar 03, 2024 am 08:57 AM
La solution au problème de connexion en arrière-plan de Discuz est révélée. Des exemples de code spécifiques sont nécessaires Avec le développement rapide d'Internet, la construction de sites Web est devenue de plus en plus courante, et Discuz, en tant que système de création de sites Web de forum couramment utilisé, a été favorisé par. de nombreux webmasters. Cependant, précisément en raison de ses fonctions puissantes, nous rencontrons parfois des problèmes lors de l'utilisation de Discuz, comme des problèmes de connexion en arrière-plan. Aujourd'hui, nous allons révéler la solution au problème de connexion en arrière-plan de Discuz et fournir des exemples de code spécifiques. Nous espérons aider ceux qui en ont besoin.
Comment se connecter à la version PC de Kuaishou - Comment se connecter à la version PC de Kuaishou
Mar 04, 2024 pm 03:30 PM
Récemment, certains amis m'ont demandé comment se connecter à la version informatique de Kuaishou. Voici la méthode de connexion pour la version informatique de Kuaishou. Les amis dans le besoin peuvent venir en savoir plus. Étape 1 : Tout d’abord, recherchez le site officiel de Kuaishou sur Baidu dans le navigateur de votre ordinateur. Étape 2 : Sélectionnez le premier élément dans la liste des résultats de recherche. Étape 3 : Après avoir accédé à la page principale du site officiel de Kuaishou, cliquez sur l'option vidéo. Étape 4 : Cliquez sur l'avatar de l'utilisateur dans le coin supérieur droit. Étape 5 : Cliquez sur le code QR pour vous connecter dans le menu de connexion contextuel. Étape 6 : Ouvrez ensuite Kuaishou sur votre téléphone et cliquez sur l'icône dans le coin supérieur gauche. Étape 7 : Cliquez sur le logo du code QR. Étape 8 : Après avoir cliqué sur l'icône de numérisation dans le coin supérieur droit de l'interface Mon code QR, scannez le code QR sur votre ordinateur. Étape 9 : Connectez-vous enfin à la version informatique de Kuaishou
Comment se connecter à deux appareils sur Quark
Feb 23, 2024 pm 10:55 PM
Comment se connecter à deux appareils avec Quark ? Quark Browser prend en charge la connexion à deux appareils en même temps, mais la plupart des amis ne savent pas comment se connecter à deux appareils avec Quark Browser. Ensuite, l'éditeur amène les utilisateurs de Quark à se connecter. à deux appareils. Méthode tutoriels graphiques, les utilisateurs intéressés viennent y jeter un oeil ! Didacticiel d'utilisation de Quark Browser Quark comment se connecter à deux appareils 1. Ouvrez d'abord l'application Quark Browser et cliquez sur [Quark Network Disk] sur la page principale. 2. Accédez ensuite à l'interface Quark Network Disk et sélectionnez la fonction de service [Ma sauvegarde] ; ; 3. Enfin, sélectionnez [Changer de périphérique] pour vous connecter à deux nouveaux appareils.
Comment accéder à la version Web de Baidu Netdisk ? Entrée de connexion à la version Web de Baidu Netdisk
Mar 13, 2024 pm 04:58 PM
Baidu Netdisk peut non seulement stocker diverses ressources logicielles, mais également les partager avec d'autres. Il prend en charge la synchronisation multi-terminal. Si aucun client n'est téléchargé sur votre ordinateur, vous pouvez choisir d'accéder à la version Web. Alors, comment se connecter à la version Web de Baidu Netdisk ? Jetons un coup d’œil à l’introduction détaillée. Entrée de connexion à la version Web de Baidu Netdisk : https://pan.baidu.com (copiez le lien vers le navigateur pour l'ouvrir) Introduction au logiciel 1. Partage Fournit une fonction de partage de fichiers, les utilisateurs peuvent organiser des fichiers et les partager avec des amis dans le besoin. 2. Cloud : il ne prend pas trop de mémoire. La plupart des fichiers sont enregistrés dans le cloud, ce qui permet d'économiser efficacement de l'espace informatique. 3. Album photo : prend en charge la fonction d'album photo cloud, importe des photos sur le disque cloud, puis les organise pour que tout le monde puisse les voir.
Que dois-je faire si je ne parviens pas à me connecter à mon compte sur Google Chrome ? Solution pour laquelle le compte Google Chrome ne peut pas être connecté
Mar 13, 2024 pm 02:10 PM
Que dois-je faire si je ne parviens pas à me connecter à mon compte sur Google Chrome ? Lorsque de nombreux utilisateurs utilisent ce logiciel, certaines fonctions nécessitent que les utilisateurs se connectent à leur compte Google avant de pouvoir l'utiliser. Cependant, ils ont essayé à plusieurs reprises mais n'ont pas réussi à se connecter. Face à ce problème, de nombreux utilisateurs ne savent pas comment le faire. résolvez-le, donc dans ce numéro, l'éditeur est là pour partager la solution avec vous. J'espère que le contenu du didacticiel logiciel d'aujourd'hui pourra être utile à tout le monde. La solution est la suivante : 1. Cliquez sur un navigateur sur le bureau et après l'avoir ouvert, vous verrez quelque chose comme ceci. 2. Si la connexion apparaît à ce moment-là, cliquez dessus. Si vous ne la voyez pas, cliquez sur le coin supérieur droit. 3. Cliquez sur Connexion, puis entrez votre numéro de compte. Vous n'avez pas besoin de saisir le compte après @, puis cliquez sur Suivant. 4. Entrez le mot de passe. Lorsque vous voyez cette invite, cliquez sur Activer.
115 Entrée de connexion à la version Web de Netdisk
Feb 23, 2024 pm 02:04 PM
115 Netdisk est un netdisk qui peut stocker de nombreuses ressources, alors quelle est l'entrée de connexion pour la version Web de 115 Netdisk. Les utilisateurs doivent saisir l'URL https://115.com pour accéder au Netdisk, et ils peuvent l'utiliser après s'être connectés ? . Ce dernier partage d'entrée de connexion à la version Web 115 Netdisk peut vous indiquer comment utiliser cette fonction, alors jetez-y un œil. 115 Partage de site Web du portail de connexion de la version Web de Netdisk : https://115.com Introduction détaillée : 1. Tout d'abord, vous devez choisir un moyen de vous connecter à Netdisk. 2. Vous pouvez voir le fichier téléchargé dans le coin supérieur droit. 3. Vous pouvez créer un nouveau dossier ici et basculer entre différents modes. 4. Vous pouvez ajouter différentes balises au fichier. 5. Les messages privés des utilisateurs peuvent être consultés sur le site Web.
