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

So ändern Sie die Standardspeicher-Engine in MySQL

Implementierung einer Bildfragmentierungsladefunktion basierend auf HTML-Code

So ändern Sie die Standardspeicher-Engine in MySQL

MySQL-Performance-Optimierung: So nutzen Sie Indizes effizient und richtig

So verwenden Sie GeoIP, um Regionen in Nginx einzuschränken

Zusammenfassung der Wissenspunkte zum MySQL ALTER-Befehl

SQL-Implementierung von LeetCode (177. N-höchstes Gehalt)

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7

Eine einfache und eingehende Studie zu Async und Await in JavaScript

HTML-Codeanalyse der Textkonvertierungseffekte bei Links- und Rechtsbewegungen

Vue nutzt Amap zur Realisierung der Stadtpositionierung

Verwenden von Nginx zum Implementieren der Graustufenversion

Artikel empfehlen

Lösen Sie das Problem, dass Zeilenhöhe = Elementhöhe, der Text aber nicht vertikal zentriert ist

Tipps zum Erstellen von HTML-E-Mails, die in herkömmlichen Postfächern normal angezeigt werden können

So ändern Sie den Bildlaufleistenstil in Vue

Ein- und Ausblenden von HTML-Elementen durch Anzeige oder Sichtbarkeit

Schritte zum Erstellen einer Linux-Umgebung unter Windows mit VMWare (Bild und Text)

Eine sehr detaillierte Zusammenfassung der Kommunikation zwischen Vue-Komponenten

Tab-Effekte mit JS schreiben

Beispielcode zum Testen einer Technologieanwendung basierend auf Docker+Selenium Grid

VMware + Ubuntu18.04 Grafisches Tutorial zum Erstellen einer Hadoop-Clusterumgebung

Teilen Sie 10 der neuesten Web-Frontend-Frameworks (Übersetzung)

Einführung in die Verwendung von CSS3-Filterattributen

So erstellen Sie einen Elastic-Stack-Cluster mit mehreren Knoten auf RHEL8/CentOS8

Warum kann MySQL bei der Verwendung von Zeitstempeln Zeitzonenprobleme ignorieren?

Eine detaillierte Einführung in die Speicherverwaltung und -adressierung unter Linux

Der Unterschied und die Verwendung von json.stringify() und json.parse()