Canvas-gesteuerte Hintergrundbilder

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

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);

Weitere Informationen von Dave Hyatt:

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.