Obrazy tła tworzone na płótnie

Programowe animowanie obrazów tła

Istnieją 2 główne sposoby animowania obrazów tła:

  1. Użyj sprite’ów CSS, aby zaktualizować background-position w JS .
  2. Hacks with .toDataURL() .

Pierwsza opcja świetnie się sprawdza, jeśli masz obraz z wyprzedzeniem, ale co zrobić, jeśli źródło musi być generowane programowo, np. przez <canvas>? Rozwiązaniem problemu 1 jest użycie elementu .toDataURL() na obszarze roboczym i ustawienie tła na wygenerowany adres URL:

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

W tym przypadku występują 2 problemy:

  1. data: Adresy URL zwiększają rozmiar wynikowego obrazu o około 33%.
  2. Dużo zmian w DOM (el.style).

Obie te metody są nieefektywne i nie nadają się do aplikacji internetowej działającej zawsze płynnie z częstotliwością 60 klatek na sekundę.

Używanie płótna 2D jako tła

Prezentacja tła w Canvas
DEMO

Okazuje się, że WebKit od lat ma niestandardowy interfejs API, który może używać elementu canvas jako źródła tła. Niestety nie ma opublikowanej specyfikacji tej funkcji.

Najpierw zamiast podawać adres URL przycisku powrotu:

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

użyj -webkit-canvas(), odwołując się do identyfikatora ciągu znaków w kontekście elementu canvas:

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

Następnie musimy utworzyć kontekst 2D za pomocą specjalnej wersji .getContext():

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

Więcej informacji od Dave’a Hyatta:

Animacje

Jak widać w wersji demonstracyjnej, możemy ponownie użyć requestAnimationFrame(), aby uruchomić animację. To świetnie, ponieważ po połączeniu powiązanie między CSS a elementem canvas jest zachowywane. Nie musisz manipulować DOM-em.

Animacja wersji demonstracyjnej nie działa w Chrome?

Obecna stabilna wersja Chrome (wersja 23) ma błąd crbug.com/161699, który uniemożliwia prawidłowe aktualizowanie tła przez animację requestAnimationFrame(). Problem został rozwiązany w Chrome 25 (obecnie w wersji Canary). Wersja demonstracyjna powinna też dobrze działać w obecnej wersji Safari.

Korzyści związane z wydajnością

Mówimy tu o płótnie. Animacje z akceleracją sprzętową są teraz w pełni dostępne (przynajmniej w przeglądarkach, w których ta funkcja działa). Powtórzę jeszcze raz: nie musisz modyfikować DOM z poziomu JavaScriptu.

Używanie WebGL jako tła

Chwileczkę. Czy to oznacza, że możemy zasilać tło CSS za pomocą WebGL? Oczywiście, że tak. WebGL to tylko kontekst 3D dla elementu canvas. Wystarczy, że zamiast „2d” wpiszesz „experimental-webgl” i gotowe.

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

Oto przykład, który zawiera element div z tłem narysowanym za pomocą shaderów wierzchołków i fragmentów: DEMO

Inne podejścia

Warto zauważyć, że Mozilla od dłuższego czasu ma -moz-element() (MDN). Jest to część specyfikacji CSS Image Values and Replaced Content Module Level 4, która umożliwia tworzenie obrazów generowanych z dowolnego kodu HTML: filmów, elementów canvas, treści DOM itp. Pełny dostęp do obrazów stanu DOM wiąże się jednak z zagrożeniami dla bezpieczeństwa. To głównie dlatego inne przeglądarki nie wprowadziły tej funkcji.