Obrazy tła tworzone na płótnie

Eric Bidelman

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 metoda sprawdza się świetnie, jeśli masz obraz z wyprzedzeniem, ale co, jeśli źródło musi być wygenerowane programowo, np. przez <canvas>? Rozwiązaniem problemu 1 jest użycie na kanwie elementu .toDataURL() i ustawienie jako tła wygenerowanego adresu URL:

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

Występują 2 problemy:

1. data: Adresy URL zwiększają rozmiar wynikowego obrazu o około 33%.
2. mnóstwo modyfikacji DOM (el.style);

Obie te metody są nieefektywne: nie nadają się do płynnej aplikacji internetowej, która działa z częstotliwością 60 FPS.

Używanie 2D Canvas jako tła

DEMO

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

Po pierwsze, zamiast podawania adresu URL dla przycisku Wstecz:

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

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

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

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

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

Uwaga: ta metoda dotyczy obiektu document, a nie kanwy. Drugi argument to ta sama nazwa, która jest używana w parametrye -webkit-canvas().

Więcej informacji od Dave’a Hyatta:

Uwaga: w przypadku danego dokumentu dla danego identyfikatora globalnego jest tylko 1 płótno CSS. Gdy uzyskujesz kontekst rysunku, określasz też rozmiar. Płótno nie zostanie wyczyszczone, o ile wielokrotnie żądasz tego samego rozmiaru. Podanie nowego rozmiaru jest równoznaczne z zmianą rozmiaru elementu <canvas>, więc bufor obrazu zostanie wyczyszczony.

Uwaga: wszystkie obiekty, które obserwują canvas CSS o tej samej nazwie, udostępniają ten canvas. Oznacza to, że (podobnie jak w przypadku animowanych GIF-ów) możesz tworzyć animacje, które będą odtwarzane jednocześnie na wszystkich klientach w płótnie. Zmiany rysunku zostaną automatycznie zastosowane do wszystkich klientów.

Animacje

Jak widać w prezentacji, możemy ponownie użyć requestAnimationFrame() do utworzenia animacji. To świetne, ponieważ po połączeniu elementów powiązanie między CSS a elementem na kanwie jest zachowane. Nie musisz manipulować DOM-em.

Nie widzisz animacji w Chrome?

Obecna stabilna wersja Chrome (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). Demo powinno też dobrze działać w aktualnej wersji Safari.

Zalety dotyczące skuteczności

Mówimy o płótnie. Animacje przyspieszone sprzętowo są teraz w pełni dostępne (przynajmniej w przeglądarkach, w których działa ta funkcja). I jeszcze raz: nie musisz ingerować w DOM z JS.

Używanie WebGL jako tła

Zaczekaj chwilę. Czy to znaczy, że możemy użyć tła CSS za pomocą WebGL? Oczywiście, że tak. WebGL to tylko kontekst 3D dla canvasa. Wystarczy zastąpić „2d” parametrem „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łkowych i fragmentowych: DEMO

Inne podejścia

Warto zauważyć, że Mozilla od dawna ma -moz-element() (MDN). Jest to część specyfikacji CSS Image Values and Replaced Content Module Level 4 (wartości obrazów w CSS i moduł treści zastępowanych na poziomie 4) i umożliwia tworzenie obrazów generowanych z dowolnego kodu HTML: filmów, obrazu na płótnie, zawartości DOM itd. Pełny dostęp do obrazów zrzutu interfejsu DOM wiąże się jednak z odpowiedzialnością za bezpieczeństwo. To jest główny powód, dla którego inne przeglądarki nie przyjęły tej funkcji.