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
Bild teilen
Schreiben von Animationsfunktionen

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

Implementierung einer Bildfragmentierungsladefunktion basierend auf HTML-Code

So kapseln Sie Timerkomponenten in Vue3

Probleme und Lösungen bei der Installation von Mininet auf Ubuntu 16.04.4LTS

Tutorial zur Kompilierung, Installation und Initialisierung von Mysql5.6.36-Skripten

Installations-Tutorial für die komprimierte Version von MySQL 5.7.18 Archiv

Express implementiert Login-Verifizierung

Das WeChat-Applet implementiert einen Videoplayer, der einen Bullet-Screen sendet

Einführung in die Bereitstellung des Selenium-Crawler-Programms unter Linux

Beispiel für die Implementierung des Skelettbildschirms des WeChat-Applets

HTML-Grundlagen-Zusammenfassungsempfehlung (Textformat)

CSS3 legt eine Maske für das Hintergrundbild fest und löst das Problem der Maskenstilvererbung

Artikel empfehlen

So verwenden Sie „not in“ zur Optimierung von MySql

37 Tipps für ein gutes User Interface Design (mit Bildern)

Tutorial zur Installation von Odoo14 aus dem Quellcode unter Ubuntu 18.04

Reflexion und Proxy in Front-End-JavaScript

Lösung für den Vue3.0-Fehler: Modul „worker_threads“ kann nicht gefunden werden

Einfaches Tutorial zur Verwendung von Navicat für MySQL

js realisiert das Verpacken mehrerer Bilder in Zip

So leiten Sie innerhalb von zwei Sekunden auf andere Seiten einer HTML-Seite um

Besprechen Sie den Wert von Webstandards aus vier Aspekten mit einer Mindmap

Analyse des Prozesses zur Konfiguration des Alibaba Cloud-Proxy-Warehouses basierend auf Nexus

vue verwendet Ele.me UI, um die Filterfunktion von Teambition zu imitieren

Analysieren Sie das Auswahlproblem beim Speichern von Zeit- und Datumstypen in MySQL

Verwenden Sie xshell, um eine Verbindung zum Linux-Server herzustellen

Vue+js realisiert Video-Ein- und Ausblendeffekte

Detaillierte Erläuterung der MySQL-Benutzervariablen und Set-Anweisungsbeispiele