Verwenden Sie die CSS Paint API, um auflösungsunabhängige, variable Hintergrundeffekte dynamisch zu erstellen

Quelle: https://medium.com/better-programming, Autor: Ferenc Almasi

Moderne Webanwendungen enthalten viele Bilder und machen den Großteil der über das Netzwerk heruntergeladenen Bytes aus. Durch eine Optimierung können Sie deren Leistung besser ausnutzen. Wenn Sie geometrische Formen als Hintergrundbilder verwenden, gibt es eine Alternative: Sie können den Hintergrund programmgesteuert mit der CSS Paint API [1] generieren.

In diesem Tutorial erkunden wir seine Fähigkeiten und schauen uns an, wie wir damit dynamische Hintergründe erstellen können, die unabhängig von der Auflösung sind. Dies ist die Ausgabe dieses Tutorials:

Referenz: Einführung zur CSS Paint API

Einrichten des Projekts

Erstellen Sie zunächst eine neue Datei index.html und schreiben Sie den folgenden Code:

<!DOCTYPE html>
<html lang="de">
  <Kopf>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0" />
    <title>:art: CSS Paint API</title>
    <link rel="stylesheet" href="styles.css" />
  </Kopf>
  <Text>
    <textarea Klasse="Muster"></textarea>
    <Skript>
      wenn ('paintWorklet' in CSS) {
        CSS.paintWorklet.addModule('pattern.js');
      }
    </Skript>
  </body>
</html>

Dabei sind einige Dinge zu beachten:

In Zeile 13 laden wir ein neues Paint-Worklet. Derzeit liegt die weltweite Unterstützung bei etwa 63 %. Daher müssen wir zuerst prüfen, ob paintWorklet unterstützt wird.
Ich verwende zur Demonstration textarea , damit wir sehen können, wie das Muster durch die Größenänderung der Leinwand neu gezeichnet wird.
Abschließend müssen noch eine pattern.js (zum Registrieren des Malarbeitsbereichs) sowie eine styles.css erstellt werden, in der wir verschiedene Stile definieren können.

Was ist ein Worklet?

Ein Paint-Worklet ist eine Klasse, die definiert, was auf die Leinwand gezeichnet werden soll. Sie funktionieren ähnlich wie das canvas -Element. Wenn Sie über Vorkenntnisse auf diesem Gebiet verfügen, wird Ihnen der Code bekannt vorkommen. Sie sind jedoch nicht 100 % identisch. Beispielsweise werden Text-Rendering-Methoden in Worklets noch nicht unterstützt.

Hier definieren wir auch die CSS-Stile. Hier verwenden wir unser Worklet:

.Muster {
  Breite: 250px;
  Höhe: 250px;
  Rand: 1px durchgezogen #000;

  Hintergrundbild: Farbe (Muster);
}

Ich habe einen schwarzen Rand hinzugefügt, damit wir textarea besser sehen können. Um auf ein Paint-Worklet zu verweisen, übergeben Sie paint(worklet-name) als Wert an background-image . Aber woher kommt pattern ? Wir haben es noch nicht definiert, also machen wir das als nächsten Schritt.

Definieren von Worklets

Öffnen Sie pattern.js und fügen Sie Folgendes hinzu:

Klasse Muster {
  malen(Kontext, Leinwand, Eigenschaften) {

  }
}

registerPaint('Muster', Muster);

Hier können Sie paintWorklet mit registerPaint registrieren. Auf den ersten Parameter können Sie im hier definierten CSS verweisen. Der zweite Parameter ist die Klasse, die definiert, was auf der Leinwand gezeichnet werden soll. Es verfügt über eine paint , die drei Parameter annimmt:

Kontext
PaintRenderingContext2D
CanvasRenderingContext2D API

canvas : Dies ist unsere Leinwand, ein PaintSize Objekt mit nur zwei Eigenschaften: Breite und Höhe.

properties : Dies gibt ein StylePropertyMapReadOnly Objekt zurück, mit dem wir CSS-Eigenschaften und ihre Werte über JavaScript lesen können.

Zeichnen Sie ein Rechteck

Der nächste Schritt besteht darin, etwas anzuzeigen, also zeichnen wir das Rechteck. Fügen Sie Ihrer paint Folgendes hinzu:

malen(Kontext, Leinwand, Eigenschaften) {
  für (let x = 0; x < canvas.height / 20; x++) {
    für (let y = 0; y < canvas.width / 20; y++) {
      const bgColor = (x + y) % 2 === 0 ? '#FFF' : '#FFCC00';

      Kontext.shadowColor = "#212121";
      Kontext.shadowBlur = 10;
      Kontext.shadowOffsetX = 10;
      Kontext.shadowOffsetY = 1;

      Kontext.beginPath();
      Kontext.Füllstil = Hintergrundfarbe;
      Kontext.Rechteck(x * 20, y * 20, 20, 20);
      Kontext.Füllen();
    }
  }
}

Alles, was wir hier getan haben, ist, eine verschachtelte Schleife zu erstellen, die die Breite und Höhe der Leinwand durchläuft. Da die Größe des Rechtecks 20 beträgt, teilen wir die Höhe und Breite des Rechtecks durch 20.

In Zeile 4 können wir den Moduloperator verwenden, um zwischen den beiden Farben zu wechseln. Für mehr Tiefe habe ich auch einige Schatten hinzugefügt. Zum Schluss zeichnen wir das Rechteck auf die Leinwand. Wenn Sie es in Ihrem Browser öffnen, sollte ungefähr Folgendes angezeigt werden:

Den Hintergrund dynamisch gestalten

Abgesehen von der Größenänderung textarea und einem Blick darauf, wie die Paint-API alles neu zeichnet, ist dies leider größtenteils statisch. Lassen Sie uns die Dinge etwas dynamischer gestalten, indem Sie benutzerdefinierte CSS-Eigenschaften hinzufügen, die wir ändern können.

Öffnen Sie Ihre styles.css und fügen Sie ihr die folgenden Zeilen hinzu:

.Muster {
     Breite: 250px;
     Höhe: 250px;
     Rand: 1px durchgezogen #000;

     Hintergrundbild: Farbe (Muster);
+ --Musterfarbe: #FFCC00;
+ --Mustergröße: 23;
+ --Musterabstand: 0;
+ --Muster-Schatten-Unschärfe: 10;
+ --Musterschatten-x: 10;
+ --Musterschatten-y: 1;
 }

Sie können benutzerdefinierte CSS-Eigenschaften definieren, indem Sie ihnen das Präfix — voranstellen. Diese Eigenschaften können von der Funktion var() verwendet werden. Aber in unserem Fall werden wir es in unserem Paint-Worklet verwenden.

Überprüfen der Unterstützung in CSS

Um sicherzustellen, dass die Paint-API unterstützt wird, können wir auch nach CSS-Unterstützung suchen. Hierzu haben wir zwei Möglichkeiten:

Verwenden Sie die Regel @supports , um die Regeln zu schützen.
Verwenden Sie ein Ersatz-Hintergrundbild.

/* Erste Option */
@supports (Hintergrund: Farbe(Muster)) {
  /**
   * Wenn dieser Abschnitt ausgewertet wird, bedeutet dies, dass die Paint-API unterstützt wird**/
}

/**
 * Zweite Option * Wenn die Paint-API unterstützt wird, überschreibt die letztere Regel die erste Regel.
 * Falls nicht unterstützt, wird es durch CSS ungültig und es gelten die Regeln für url().
 **/
.Muster {
  Hintergrundbild: URL (Muster.png);
  Hintergrundbild: Farbe (Muster);
}

Zugriff auf Parameter in einem Painting-Worklet

Um diese Parameter in pattern.js zu lesen, müssen Sie der Klasse, die Ihr Paint-Worklet definiert, eine neue Methode hinzufügen:

Klasse Muster {
  // Alles, was von der Methode „inputProperties“ zurückgegeben wird, ist für das Paint-Worklet zugänglich.
  statisch get inputProperties() {
    zurückkehren [
      „--Musterfarbe“,
      „--Mustergröße“,
      „--pattern-spacing“,
      '--Muster-Schatten-Unschärfe',
      '--pattern-shadow-x',
      „--Muster-Schatten-y“
    ];
  }
}

Um innerhalb der paint -Methode auf diese Eigenschaften zuzugreifen, können Sie properties.get verwenden:

malen(Kontext, Leinwand, Eigenschaften) {
  const props = {
    Farbe: Eigenschaften.get('--pattern-color').toString().trim(),
    Größe: parseInt(Eigenschaften.get('--pattern-size').toString()),
    Abstand: parseInt(Eigenschaften.get('--pattern-spacing').toString()),
    Schatten:
      Unschärfe: parseInt(Eigenschaften.get('--pattern-shadow-blur').toString()),
      x: parseInt(Eigenschaften.get('--pattern-shadow-x').toString()),
      y: parseInt(Eigenschaften.get('--pattern-shadow-y').toString())
    }
  };
}

Für die Farbe müssen wir es in eine Zeichenfolge umwandeln. Alles andere muss in Zahlen umgewandelt werden. Dies liegt daran, dass properties.get CSSUnparsedValue zurückgibt.

Rückgabewert von Properties.get

Um die Lesbarkeit zu verbessern, habe ich zwei neue Funktionen erstellt, die das Parsen für uns übernehmen:

malen(Kontext, Leinwand, Eigenschaften) {
  const getPropertyAsString = Eigenschaft => Eigenschaften.get(Eigenschaft).toString().trim();
  const getPropertyAsNumber = Eigenschaft => parseInt(properties.get(property).toString());

  const props = {
    Farbe: getPropertyAsString('--pattern-color'),
    Größe: getPropertyAsNumber('--pattern-size'),
    Abstand: getPropertyAsNumber('--pattern-spacing'),
    Schatten:
      Unschärfe: getPropertyAsNumber('--pattern-shadow-blur'),
      x: getPropertyAsNumber('--pattern-shadow-x'),
      y: getPropertyAsNumber('--pattern-shadow-y')
    }
  };
}

Jetzt müssen wir nur noch alles innerhalb der For-Schleife durch den entsprechenden prop Wert ersetzen:

für (let x = 0; x < canvas.height / props.size; x++) {
  für (let y = 0; y < canvas.width / props.size; y++) {
    const bgColor = (x + y) % 2 === 0 ? '#FFF' : props.color;

    Kontext.shadowColor = "#212121";
    Kontext.shadowBlur = Requisiten.shadow.blur;
    Kontext.shadowOffsetX = props.shadow.x;
    Kontext.shadowOffsetY = props.shadow.y;

    Kontext.beginPath();
    Kontext.Füllstil = Hintergrundfarbe;
    Kontext.Rechteck(x * (Eigenschaftengröße + Eigenschaftenabstand),
                 y * (Requisitengröße + Requisitenabstand), Requisitengröße, Requisitengröße);
    Kontext.Füllen();
  }
}

Gehen Sie jetzt zurück zu Ihrem Browser und versuchen Sie, ihn zu ändern.

Bearbeiten der Hintergrundzusammenfassung in DevTools

Warum ist die CSS Paint API für uns nützlich? Was sind die Anwendungsfälle?

Am offensichtlichsten ist, dass dadurch die Größe der Antwort reduziert wird. Durch den Verzicht auf die Verwendung von Bildern können Sie eine Netzwerkanfrage und mehrere tausend Bytes einsparen. Dies verbessert die Leistung.

Bei komplexen CSS-Effekten, die DOM-Elemente verwenden, können Sie auch die Anzahl der Knoten auf der Seite reduzieren. Da Sie mit der Paint-API komplexe Animationen erstellen können, sind keine zusätzlichen leeren Knoten erforderlich.

Der größte Vorteil besteht meiner Meinung nach darin, dass es viel besser anpassbar ist als ein statisches Hintergrundbild. Die API ermöglicht Ihnen außerdem die Erstellung auflösungsunabhängiger Bilder, sodass Sie sich keine Sorgen machen müssen, ob eine einzige Bildschirmgröße fehlt.

Wenn Sie sich heute für die Verwendung der CSS Paint API entscheiden, stellen Sie unbedingt einen Polyfill bereit, da dieser noch nicht weit verbreitet ist. Wenn Sie das fertige Projekt noch optimieren möchten, können Sie es aus diesem GitHub-Repository [2] klonen.

Offizielle Version des Grünen Buches : Nach der Ansammlung der ersten beiden Versionen und drei Jahren umfassender Neuschreibung erreicht dieses Buch endlich eine perfekte Übereinstimmung zwischen technischer Analyse und Benutzererfahrung.

Die Breite und Tiefe sorgen für einen großartigen Artikel : In Bezug auf die Tiefe befasst sich dieses Buch mit den Gründen hinter JS, die weltweit ihresgleichen suchen; in Bezug auf die Breite geht dieses Buch auf die Details der Semantik ein, und nach der Lektüre werden Sie über den Mechanismus nicht länger verwirrt sein.

Die Idee der Supersprache : Alle Dinge haben denselben Zweck und sind ähnlich. Wenn Sie die JS-Shell weglassen, werden Sie feststellen, dass dieses Buch die technische Essenz der Sprache auf hohem Niveau analysiert und auf alle Programmiersprachen anwendbar ist.

Der Schlüssel zur Weiterentwicklung liegt im Neulernen : Im Zeitalter hybrider App-, Node-Server-, FaaS-Cloud-Native- und Front-End-Intelligenz kann Ihnen die Rückkehr zum Wesentlichen und die Wiederholung dieses Grundkurses dabei helfen, weiter und schneller voranzukommen.

Referenzen[1]

CSS Paint-API: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API

[2]

GitHub-Repository: https://github.com/flowforfrank/css-paint

Dies ist das Ende dieses Artikels über die Verwendung der CSS Paint API zum dynamischen Erstellen von auflösungsunabhängigen variablen Hintergrundeffekten. Weitere relevante Inhalte zu variablen Hintergründen der CSS Paint API finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: Vue erhält Token zur Implementierung des Beispielcodes für die Token-Anmeldung

>>: Detailliertes Tutorial zum Abrufen der Oracle 11g-Imagekonfiguration über Docker

Webdesign: Die genaue Platzierung und Verwendung massiver Materialien

Verwenden Sie die CSS Paint API, um auflösungsunabhängige, variable Hintergrundeffekte dynamisch zu erstellen

Webdesign: Die genaue Platzierung und Verwendung massiver Materialien

Zusammenfassung der XHTML-Anwendung im Webdesign-Studium

JS-Implementierung des Karussell-Karussell-Falls

Detaillierte Erklärung des Docker-Bereitstellungstutorials für Jenkins-Anfänger

Detaillierte Erklärung und Beispiele zur Passwortverschlüsselung für Datenbankkonten

MySQL 8.0.18 Hash Join unterstützt keine Links-/Rechts-Joins. Probleme mit Links- und Rechts-Joins

Detaillierte Erklärung dieses Zeigeproblems in der JavaScript-Funktion

Der Prozess der Installation und Konfiguration von Nginx in Win10

Detaillierte Erklärung verschiedener Bildformate wie JPG, GIF und PNG

Erfahren Sie, wie Sie den Zabbix-Dienst auf Saltstack bereitstellen

Artikel empfehlen

Detaillierte Erläuterung des Prozesses zum Erstellen und Ausführen von Docker-Containern

CSS zum Erzielen eines Chat-Blaseneffekts

Eigenschaften und Quellcode der Echarts-Legendenkomponente

Detaillierte Erläuterung der Wissenspunkte zum Umschalten zwischen MySQL MGR-Einzelmaster- und Multimastermodus

Vue implementiert Paging-Funktion

Mit dem Befehl docker prune können Sie selten genutzte Daten regelmäßig bereinigen.

Detailliertes Tutorial zur Überwachung von Nginx/Tomcat/MySQL mit Zabbix

Bringen Sie Ihnen bei, wie Sie elegant eine vertikale Zentrierung erreichen (empfohlen)

Implementierung zum Entfernen überlappender Zeiten und Berechnen der Zeitdifferenz in MySQL

Detaillierte Erklärung der Anzeigeeigenschaft im CSS-Beschriftungsmodus

Eine kurze Analyse der Grundkonzepte von HTML-Webseiten

Docker installiert ClickHouse und initialisiert den Datentest

Detaillierte Erklärung der Anwendung von CSS Sprite

Einführung und Installation von vue-cli

JavaScript zum Anzeigen und Ausblenden des Dropdown-Menüs