Partagez l'exemple de code d'utilisation de Canvas pour implémenter la page de connexion Zhihu-Tutoriel H5-php.cn

Partagez l'exemple de code d'utilisation de Canvas pour implémenter la page de connexion Zhihu

零下一度

Libérer： 2017-05-09 11:00:53

original

2404 Les gens l'ont consulté

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>

Copier après la connexion

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;

Copier après la connexion

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
 });
}

Copier après la connexion

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();
}

Copier après la connexion

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();
}

Copier après la connexion

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();
 }
 }
}

Copier après la connexion

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 ) );
}

Copier après la connexion

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;
 }
}

Copier après la connexion

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();
}

Copier après la connexion

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);
})();

Copier après la connexion

À 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!