Implementierung einer Bildfragmentierungsladefunktion basierend auf HTML-Code
|
Heute werden wir einen fragmentierten Bildladeeffekt implementieren. Der Effekt ist wie folgt:
Dies setzen wir in 3 Schritten um:
Definieren Sie die HTML-Struktur Alles was Sie hier brauchen ist ein Canvas-Element.
<html>
<Text>
<Leinwand
id="meineLeinwand"
Breite="900"
Höhe="600"
Stil="Hintergrundfarbe: schwarz;"
></Leinwand>
</body>
</html>Bild teilen In diesem Beispiel teilen wir das Bild gemäß einem Raster aus 10 Zeilen und 10 Spalten in 100 kleine Fragmente auf, sodass jedes kleine Fragment unabhängig gerendert werden kann.
let image = neues Bild();
image.src = "https://cdn.yinhengli.com/canvas-example.jpeg";
lass Boxbreite, Boxhöhe;
// Aufteilen in 10 Zeilen und 10 Spalten let rows = 10,
Spalten = 20,
Zähler = 0;
bild.onload = Funktion () {
// Breite und Höhe jeder Zeile und Spalte berechnen boxWidth = image.width / columns;
BoxHeight = Bildhöhe / Zeilen;
// Schleifen-Rendering requestAnimationFrame(animate);
};requestAnimationFrame: Teilt dem Browser mit, dass Sie eine Animation durchführen möchten, und fordert den Browser auf, die angegebene Rückruffunktion aufzurufen, um die Animation vor dem nächsten Neuzeichnen zu aktualisieren. Schreiben von Animationsfunktionen Als nächstes schreiben wir eine Animationsfunktion, mit der der Browser vor jedem Neuzeichnen zufällig ein kleines Fragment rendert. Der Kern ist hier die Methode context.drawImage.
let canvas = document.getElementById("myCanvas");
let Kontext = Canvas.getContext("2d");
Funktion animieren() {
// Ein Modul zufällig rendern let x = Math.floor(Math.random() * columns);
sei y = Math.floor(Math.random() * Zeilen);
// Kernkontext.drawImage(
Bild,
x * boxWidth, // Die Startposition der horizontalen Koordinate auf der Leinwand y * boxHeight, // Die Startposition der vertikalen Koordinate auf der Leinwand boxWidth, // Die Breite der Zeichnung (die Breite des kleinen Fragmentbildes)
boxHeight, // Die Höhe der Zeichnung (die Höhe des kleinen Fragmentbildes)
x * boxWidth, // Beginnen Sie mit dem Zeichnen an der x-Koordinatenposition des großen Bildes. y * boxHeight, // Beginnen Sie mit dem Zeichnen an der y-Koordinatenposition des großen Bildes. boxWidth, // Beginnen Sie mit dem Zeichnen an der x-Position des großen Bildes (der Breite des kleinen Fragmentbildes).
boxHeight // Ausgehend von der Y-Position des großen Bildes, wie hoch gezeichnet werden soll (die Höhe des kleinen Fragmentbildes)
);
Zähler++;
// Wenn das Modul zu 90 % gerendert ist, zeige das gesamte Bild.
if (Zähler > Spalten * Zeilen * 0,9) {
Kontext.drawImage(Bild, 0, 0);
} anders {
requestAnimationFrame(animieren);
}
}Vollständiger Code
<html>
<Text>
<Leinwand
id="meineLeinwand"
Breite="900"
Höhe="600"
Stil="Hintergrundfarbe: schwarz;"
></Leinwand>
<Skript>
let image = neues Bild();
image.src = "https://cdn.yinhengli.com/canvas-example.jpeg";
let canvas = document.getElementById("myCanvas");
let Kontext = Canvas.getContext("2d");
lass Boxbreite, Boxhöhe;
sei Zeilen = 10,
Spalten = 20,
Zähler = 0;
bild.onload = Funktion () {
BoxWidth = Bildbreite / Spalten;
BoxHeight = Bildhöhe / Zeilen;
requestAnimationFrame(animieren);
};
Funktion animieren() {
sei x = Math.floor(Math.random() * Spalten);
sei y = Math.floor(Math.random() * Zeilen);
Kontext.Bild zeichnen(
Bild,
x * boxWidth, // Startposition der horizontalen Koordinate y * boxHeight, // Startposition der vertikalen Koordinate boxWidth, // Breite des Bildes boxHeight, // Höhe des Bildes x * boxWidth, // Platziere die x-Koordinatenposition des Bildes auf der Leinwand y * boxHeight, // Platziere die y-Koordinatenposition des Bildes auf der Leinwand boxWidth, // Zu verwendende Breite des Bildes boxHeight // Zu verwendende Höhe des Bildes);
Zähler++;
if (Zähler > Spalten * Zeilen * 0,9) {
Kontext.drawImage(Bild, 0, 0);
} anders {
requestAnimationFrame(animieren);
}
}
</Skript>
</body>
</html>Zusammenfassen In dieser Demo verwenden wir CanvasAPI, um den Fragmentladeeffekt von Bildern zu erzielen. Ist das nicht ganz einfach? Dies ist das Ende dieses Artikels über die Implementierung der Bildfragmentierungsladefunktion basierend auf HTML-Code. Weitere relevante Inhalte zum Laden von HTML-Bildfragmenten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
<<: Detaillierte Erklärung der .bash_profile-Datei im Linux-System
>>: Zeichnen Sie ein iPhone basierend auf CSS3
Artikel empfehlen
WebWorker kapselt JavaScript-Sandbox-Details
Inhaltsverzeichnis 1. Szenario 2. Implementieren ...
Zusammenfassung des Wissens zu CSS-Injection
Moderne Browser erlauben nicht mehr, JavaScript i...
HTML 5.1 lernen: 14 neue Features und Anwendungsbeispiele
Vorwort Wie wir alle wissen, gehört HTML5 dem Wor...
So verwalten Sie große Datei-Uploads und Breakpoint-Resumes basierend auf js
Inhaltsverzeichnis Vorwort Frontend-Struktur Back...
Eine detaillierte Einführung in die Linux-Systemkonfiguration (Dienststeuerung)
Inhaltsverzeichnis Vorwort 1. Systemdienststeueru...
Was ich beim Aufbau meines eigenen Blogs gelernt habe
<br />In einem Jahr Bloggen habe ich persönl...
Implementierung eines Karussells mit nativem JavaScript
In diesem Artikel finden Sie den spezifischen Cod...
JavaScript-Grundlagenobjekte
Inhaltsverzeichnis 1. Gegenstand 1.1 Was ist ein ...
MySQL Series 11-Protokollierung
Tutorial-Reihe MySQL-Reihe: Grundlegende Konzepte...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.13
Installation der Msyql-Datenbank. Zu Ihrer Inform...
docker-maven-plugin verpackt das Image und lädt es in ein privates Warehouse hoch
Inhaltsverzeichnis 1. Einführung in das Docker-Ma...
Beispiel für die Validierung eines JavaScript-Formulars
HTML-Formulare werden häufig verwendet, um Benutz...
js implementiert Axios Limit-Anforderungswarteschlange
Inhaltsverzeichnis Der Hintergrund ist: Was wird ...
Ungewöhnliche, aber nützliche Tags in Xhtml
Xhtml hat viele Tags, die nicht häufig verwendet w...
Die am häufigsten verwendete HTML-Escape-Sequenz
In HTML haben <, >, & usw. eine speziell...