Canvas-gesteuerte Hintergrundbilder

Eric Bidelman

Programmatische Animation von Hintergrundbildern

Es gibt zwei Hauptmethoden, um Hintergrundbilder zu animieren:

1. Verwenden Sie CSS-Sprites, um eine background-position in JS zu aktualisieren .
2. Hacks mit .toDataURL()

Die erste Methode funktioniert hervorragend, wenn Sie das Bild im Voraus haben. Was aber, wenn Ihre Quelle programmatisch generiert werden muss, z. B. durch eine <canvas>? Für Problem 1 können Sie .toDataURL() auf dem Canvas verwenden und den Hintergrund auf die generierte URL festlegen:

while(1) {
    var url = canvas.toDataURL('image/jpeg');
    el.style.background = 'url(' + url + ')';
}

Das hat zwei Probleme:

1. data: URLs erhöhen die Größe des resultierenden Bildes um etwa 33 %.
2. Viele DOM-Zugriffe (el.style).

Beide Methoden sind ineffizient und für eine Web-App mit 60 fps nicht akzeptabel.

2D-Canvas als Hintergrund verwenden

DEMO

Es gibt eine nicht standardmäßige API, die seit Jahren in WebKit verfügbar ist und Canvas als Quelle für einen Hintergrund verwenden kann. Leider gibt es jedoch keine veröffentlichte Spezifikation für diese Funktion.

Geben Sie zuerst anstelle einer URL für „Zurück“ Folgendes an:

.bg {
    background: url(bg.png) no-repeat 50% 50%;
}

Verwenden Sie -webkit-canvas(), um eine String-ID auf einen Canvas-Kontext zu verweisen:

.canvas-bg {
    background: -webkit-canvas(animation) no-repeat 50% 50%;
}

Als Nächstes müssen wir den 2D-Kontext mit einer speziellen Version von .getContext() erstellen:

var ctx = document.getCSSCanvasContext('2d', 'animation', 300, 300);

Hinweis:Diese Methode befindet sich auf dem document-Objekt und nicht auf dem Canvas. Das zweite Argument ist derselbe Name, der in -webkit-canvas() verwendet wird.

Weitere Informationen von Dave Hyatt:

Hinweis:Es gibt nur einen CSS-Canvas für eine bestimmte globale Kennung pro Dokument. Wenn Sie den Zeichenkontext abrufen, geben Sie auch die Größe an. Der Canvas wird nicht gelöscht, solange Sie wiederholt dieselbe Größe anfordern. Wenn Sie eine neue Größe angeben, entspricht das dem Verhalten, das Sie erwarten würden, wenn Sie die Größe eines <canvas>-Elements ändern. Der Canvas-Puffer wird also gelöscht.

Hinweis:Alle Objekte, die ein CSS-Canvas mit demselben Namen beobachten, teilen sich dieses Canvas. Das bedeutet, dass Sie (ähnlich wie bei animierten GIFs) Animationen erstellen und sie synchron auf allen Clients des Canvas abspielen können. Änderungen an Zeichnungen werden automatisch an alle Clients weitergegeben.

Animationen

Wie in der Demo zu sehen, können wir requestAnimationFrame() wiederverwenden, um eine Animation zu steuern. Das ist sehr praktisch, da die Verknüpfung zwischen CSS und dem Canvas-Element nach der Einrichtung erhalten bleibt. Sie müssen nicht mit dem DOM herumspielen.

Demo wird in Chrome nicht animiert?

Der aktuelle stabile Chrome-Release (Version 23) hat crbug.com/161699, was verhindert, dass bei einer requestAnimationFrame()-Animation der Hintergrund richtig aktualisiert wird. Dieser Fehler wurde in Chrome 25 (aktuell Canary) behoben. Die Demo sollte auch in der aktuellen Safari-Version gut funktionieren.

Leistungsvorteile

Wir sprechen hier von Canvas. Hardwarebeschleunigte Animationen sind jetzt vollständig verfügbar (zumindest in den Browsern, in denen diese Funktion funktioniert). Zur Erinnerung: Das DOM muss nicht mit JS manipuliert werden.

WebGL als Hintergrund verwenden

Einen Moment. Heißt das, dass wir einen CSS-Hintergrund mit WebGL erstellen können? Natürlich! WebGL ist lediglich ein 3D-Kontext für Canvas. Ersetzen Sie einfach „2d“ durch „experimental-webgl“ und schon ist es geschafft.

var gl = document.getCSSCanvasContext('experimental-webgl', 'animation', 300, 150);

Hier ist ein Proof of Concept mit einem Div-Element, dessen Hintergrund mit Vertex- und Fragment-Shadern gezeichnet wird: DEMO

Andere Ansätze

Mozilla hat -moz-element() (MDN) schon seit einiger Zeit. Diese Funktion ist Teil der Spezifikation CSS Image Values and Replaced Content Module Level 4 (CSS-Werte für Bilder und ersetzte Inhalte – Modul 4) und ermöglicht es, ein Bild zu erstellen, das aus beliebigem HTML generiert wird: Videos, Canvas, DOM-Inhalte usw. Der vollständige Zugriff auf Snapshot-Images des DOM birgt jedoch Sicherheitsrisiken. Das ist vor allem der Grund, warum andere Browser diese Funktion nicht übernommen haben.