Canvas-gesteuerte Hintergrundbilder

Eric Bidelman

Twitter GitHub Startseite

Hintergrundbilder programmatisch animieren

Es gibt zwei Hauptmethoden, um Hintergrundbilder zu animieren:

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

Die erste funktioniert hervorragend, wenn Sie das Bild im Voraus haben. Aber was ist, wenn Ihre Quelle programmatisch generiert werden muss, z. B. durch ein <canvas>? Die Lösung Nr. 1 besteht darin, .toDataURL() im Canvas zu verwenden und den Hintergrund auf die generierte URL festzulegen:

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

Dabei gibt es zwei Probleme:

1. data:-URLs erhöhen die Größe des Bilds um ca. 33 %.
2. Jede Menge DOM berührt (el.style).

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

2D-Canvas als Hintergrund verwenden

DEMO

Wie sich herausstellt, gibt es eine nicht standardmäßige API, die WebKit seit Jahren verwendet und die Canvas als Quelle für einen Hintergrund verwenden kann. Leider gibt es keine veröffentlichte Spezifikation für diese Funktion.

Anstatt eine URL für die Rückseite anzugeben, gehen Sie wie folgt vor:

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

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

.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 entspricht dem Namen, der in -webkit-canvas() verwendet wird.

Weitere Informationen von Dave Hyatt:

Hinweis:Pro Dokument gibt es nur ein CSS-Canvas für eine bestimmte globale Kennung. Wenn Sie den Zeichnungskontext abrufen, geben Sie auch die Größe an. Der Canvas wird nicht gelöscht, solange Sie dieselbe Größe wiederholt anfordern. Die Angabe einer neuen Größe entspricht dem Verhalten, das Sie erwarten würden, wenn Sie die Größe eines <canvas>-Elements ändern. In diesem Fall wird der Canvas-Zwischenspeicher gelöscht.

Hinweis:Alle Objekte, die ein gleichnamiges CSS-Canvas nutzen, teilen dieses Canvas. Ähnlich wie bei animierten GIFs können Sie also Animationen erstellen und diese synchron auf allen Clients des Canvas ausführen. Änderungen an der Zeichnung werden automatisch für alle Clients übernommen.

Animationen

Wie in der Demo gezeigt, können wir requestAnimationFrame() wiederverwenden, um eine Animation zu starten. Das ist großartig, denn sobald die Geräte verbunden sind, bleibt die Verknüpfung zwischen CSS und dem Canvas-Element erhalten. Sie müssen nicht mit dem DOM herumspielen.

Die Demo ist in Chrome nicht animiert?

Die aktuelle stabile Version von Chrome (Version 23) enthält crbug.com/161699. Dadurch wird verhindert, dass eine requestAnimationFrame()-Animation den Hintergrund korrekt aktualisiert. Dieses Problem wurde in Chrome 25 (derzeit Canary) behoben. Die Demo sollte auch in der aktuellen Safari gut funktionieren.

Leistungsvorteile

Wir sprechen hier von Canvas. Hardwarebeschleunigte Animationen sind jetzt vollständig aktiviert (zumindest in den Browsern, in denen diese Funktion unterstützt wird). Noch einmal zur Erinnerung: Es besteht keine Notwendigkeit, das DOM aus JS zu belästigen.

WebGL als Hintergrund verwenden

Einen Moment. Heißt das, wir können einen CSS-Hintergrund mit Webgl aktivieren? Natürlich ist das der Fall. WebGL ist nur ein 3D-Kontext für Canvas. Ersetzen Sie einfach "experimental-webgl" anstelle von "2d" und voilà.

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

Hier ist ein Proof of Concept, das ein div-Element enthält, dessen Hintergrund mit Vertex- und Fragment-Shadern gezeichnet wurde: DEMO

Andere Ansätze

Es sollte erwähnt werden, dass -moz-element() (MDN) in Mozilla schon seit geraumer Zeit verwendet wird. Dies ist Teil der Spezifikation Modul 4 des Moduls "CSS-Bildwerte und ersetzter Content". Damit können Sie ein Bild erstellen, das aus beliebigem HTML-Code generiert wird: Videos, Canvas, DOM-Inhalt usw. Es gibt jedoch Sicherheitsbedenken im Hinblick auf den uneingeschränkten Zugriff auf Snapshot-Images des DOM. Dies ist vor allem der Grund, warum andere Browser diese Funktion nicht übernommen haben.