In diesem Artikel werden hauptsächlich die relevanten Kenntnisse von Canvas vorgestellt, um den Hintergrundeffekt der Zhihu-Anmeldeseite einfach und schnell zu implementieren, der einen sehr guten Referenzwert hat. Schauen wir es uns mit dem Editor unten an
Vorwort
Wenn Sie die Anmeldeseite von Zhihu öffnen, können Sie sehen, dass im Hintergrund eine Animation zu sehen ist. Das sieht ziemlich cool aus. Schöner Look:
Dieser Effekt ist mit Leinwand nicht schwer zu erzielen. Als nächstes werden wir diesen Effekt Schritt für Schritt erklären und erzielen.
Analyse
Analysieren Sie vor Arbeitsbeginn, wie die Wirkung wirkt. Das erste, was man verstehen muss, ist, dass, obwohl es den Anschein hat, dass sich alle Linien und Kreise bewegen, sich tatsächlich nur Kreise bewegen und Linien lediglich zwei beliebige Kreise verbinden, die bestimmte Bedingungen erfüllen. Lassen Sie uns dann analysieren, wie sich der Kreis bewegt. Aus dem Effekt geht hervor, dass sich jeder Kreis in einer geraden Linie mit gleichmäßiger Geschwindigkeit bewegt und die Bewegungsrichtungen unterschiedlich sind. Durch physikalisches Wissen können wir erkennen, dass sich jeder Kreis sowohl horizontal als auch horizontal bewegt vertikale Richtungen Es gibt eine Geschwindigkeit. Wenn sich der Kreis schließlich aus einer beliebigen Grenze der Leinwand herausbewegt, tritt der Kreis von der gegenüberliegenden Seite der Kante, die die Grenze verlässt, wieder in die Leinwand ein. Es wird viel klarer, wenn Sie diese drei Schlüsselpunkte verstanden haben.
Üben
Erstellen Sie zuerst eine Leinwand:
// 这里就简单地设置下背景色
<body style="background:#f7fafc;">
<canvas id="canvas" style="width: 100%; height: 100%;"></canvas>
</body>
Nach dem Login kopieren
Dann holen Sie sich den Leinwandkontext und legen Sie einige allgemeine Attribute fest
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;Nach dem Login kopieren
Zeichnen Sie als Nächstes einen Kreis. Für das Zeichnen eines Kreises sind dann die Mittelpunktskoordinaten, der Radius, die horizontale Geschwindigkeit und die vertikale Geschwindigkeit des Kreises erforderlich. Diese Informationen müssen über eine Funktion <🎜 bestimmte Bedingungen erfüllen > zum Erstellen:
// 存放所有圆的数组，这里用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
});
}Nach dem Login kopieren
Wählen Sie dann aus, wie viele Kreise Sie entsprechend Ihrer eigenen Situation zeichnen müssen. Hier gehe ich davon aus, dass es 20 sind, was bequemer aussieht:
// 圆的数量
var num = 20;
for(var i = 0; i < num; i++) {
createBall();
}Nach dem Login kopieren
Jetzt Damit die Kreisinformationen verfügbar sind, besteht der nächste Schritt darin, Kreise und Linien für jeden Frame zu zeichnen, eine r
Ender-Funktion zu erstellen und dann alle Kreise innerhalb der Funktion zu zeichnen:
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();
}Nach dem Login kopieren
Dann muss überprüft werden, ob der Abstand zwischen den Mittelpunkten der beiden Kreise kleiner als ein bestimmter kritischer Wert ist (z. B. 500). Wenn er erfüllt ist, verbinden Sie die Mittelpunkte der beiden Kreise:
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();
}
}
}Nach dem Login kopieren
Hier dient die Abstandsfunktion dazu, den Abstand zwischen zwei Punkten zu berechnen:
function distance(point1, point2) {
return Math.sqrt( Math.pow( (point1.x - point2.x), 2 ) + Math.pow( (point1.y - point2.y), 2 ) );
}Nach dem Login kopieren
Der andere Schritt besteht darin, festzustellen, ob der Kreis den Grenzwert überschreitet. Wenn die Bedingung erfüllt ist, wird er erneut eingegeben von der gegenüberliegenden Seite:
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;
}
}Nach dem Login kopieren
Wenn Sie es einfacher machen möchten, entfernen Sie einfach einen Kreis und regenerieren Sie ihn neu, solange der Kreis Folgendes überschreitet:
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();
}Nach dem Login kopieren
Auf diese Weise , die Details zum Zeichnen jedes Rahmens sind abgeschlossen und der letzte Schritt besteht darin, die Kreise zu bewegen:
(function loop(){
render();
requestAnimationFrame(loop);
})();Nach dem Login kopieren
An diesem Punkt wird der gesamte Effekt sichtbar. Natürlich gibt es viele Details, die Sie selbst herausfinden können, um den Effekt zarter und farbenfroher zu gestalten. Ich hoffe, es hilft Neulingen.
[Verwandte Empfehlungen]
1.
Kostenloses h5-Online-Video-Tutorial
2.
HTML5-Vollversionshandbuch
3.
php.cn Original-HTML5-Video-Tutorial
Das obige ist der detaillierte Inhalt vonTeilen Sie den Beispielcode für die Verwendung von Canvas zur Implementierung der Zhihu-Anmeldeseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
