Canvas-gesteuerte Hintergrundbilder

Hintergrundbilder programmatisch animieren

Es gibt zwei Hauptmethoden, um Hintergrundbilder zu animieren:

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

Die erste Methode funktioniert gut, wenn Sie das Bild im Voraus haben. Was aber, wenn die Quelle programmatisch generiert werden muss, z. B. von einem <canvas>? Die Lösung für Methode 1 besteht darin, .toDataURL() auf dem 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 resultierenden Bildes um etwa 33 %.
  2. Viele DOM-Berührungen (el.style).

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

2D-Canvas als Hintergrund verwenden

Canvas als Hintergrund – Demo
DEMO

Es gibt eine nicht standardmäßige API, die WebKit seit Jahren verwendet und mit der Canvas als Quelle für einen Hintergrund verwendet werden kann. Leider gibt es jedoch keine veröffentlichte Spezifikation für diese Funktion.

Anstatt eine URL für den Hintergrund anzugeben:

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

verwenden Sie -webkit-canvas() und verweisen Sie mit einem String-Bezeichner 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 zu sehen ist, können wir requestAnimationFrame() wiederverwenden, um eine Animation zu steuern. Das ist großartig, denn sobald alles eingerichtet ist, bleibt die Verknüpfung zwischen CSS und dem Canvas-Element erhalten. Sie müssen nicht am DOM herumspielen.

Demo in Chrome nicht animiert?

In der aktuellen stabilen Version von Chrome (Version 23) gibt es crbug.com/161699, wodurch verhindert wird, dass eine requestAnimationFrame() Animation den Hintergrund richtig aktualisiert. Dieses Problem wurde in Chrome 25 behoben (derzeit Canary). Die Demo sollte auch im aktuellen Safari gut funktionieren.

Leistungsvorteile

Hier geht es um Canvas. Hardwarebeschleunigte Animationen sind jetzt voll im Spiel (zumindest für die Browser, in denen diese Funktion funktioniert). Und noch einmal: Sie müssen das DOM nicht mit JS bearbeiten von JS.

WebGL als Hintergrund verwenden

Moment mal. Bedeutet das, dass wir einen CSS-Hintergrund mit WebGL steuern können? Natürlich! WebGL ist lediglich ein 3D-Kontext für Canvas. Ersetzen Sie einfach „2d“ durch „experimental-webgl“ und fertig.

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

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

Andere Ansätze

Mozilla bietet seit einiger Zeit -moz-element() (MDN) an. Dies ist Teil der Spezifikation für CSS-Bildwerte und ersetzte Inhalte, Modul Level 4 und ermöglicht es Ihnen, ein Bild aus beliebigem HTML zu erstellen: Videos, Canvas, DOM-Inhalte usw. Es gibt jedoch Sicherheitsbedenken, wenn Sie vollen Zugriff auf Snapshot-Bilder des DOM haben. Das ist der Hauptgrund, warum andere Browser diese Funktion nicht übernommen haben.