Obrazy tła tworzone na płótnie

Eric Bidelman

Twitter GitHub Strona główna

Automatyczne animowanie obrazów tła

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

1. Aby zaktualizować background-position w kodzie JS, użyj sprite’ów CSS .
2. Hakowanie z użyciem .toDataURL() .

Pierwszy rodzaj to świetne rozwiązanie, jeśli masz obraz z wyprzedzeniem, ale co w sytuacji, gdy źródło musi zostać wygenerowane automatycznie, na przykład przez <canvas>? Rozwiązaniem problemu nr 1 jest użycie elementu .toDataURL() w obszarze roboczym i ustawienie tła na wygenerowany adres URL:

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

Tu występują 2 problemy:

1. Adresy URL data: dodają do wynikowego obrazu narzut o około 33% rozmiaru.
2. Mnóstwo funkcji DOM Touch (el.style).

Obie te metody są nieefektywne: nie są dozwolone w przypadku zawsze płynnej aplikacji internetowej z szybkością 60 kl./s.

Wykorzystywanie odbitki na płótnie 2D jako tła

Demonstracja

Okazało się, że istnieje od lat niestandardowy interfejs API używany przez WebKit, który może służyć jako źródło tła dla kanw. Nie ma jednak opublikowanych specyfikacji tej funkcji.

Po pierwsze, zamiast określać adres URL tylnej strony:

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

użyj -webkit-canvas(), odwołując się do identyfikatora ciągu do kontekstu obszaru roboczego:

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

Następnie musimy utworzyć kontekst 2D ze specjalną wersją funkcji .getContext():

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

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

Więcej informacji od Dave'a Hyatta:

Uwaga: istnieje tylko 1 odbitka na płótnie CSS dla danego identyfikatora globalnego na dokument. Po uzyskaniu kontekstu rysunku możesz też określić rozmiar. Odbitka na płótnie nie zostanie wyczyszczona, jeśli wielokrotnie prosisz o ten sam rozmiar. Określenie nowego rozmiaru jest zgodne z oczekiwanym zachowaniem po zmianie rozmiaru elementu <canvas>, w wyniku czego bufor obszaru roboczego zostanie wyczyszczony.

Uwaga: wszystkie obiekty, które obserwują odbitkę na płótnie CSS o tej samej nazwie, współdzielą tę przestrzeń. Oznacza to, że (podobnie jak w przypadku animowanych GIF-ów) możesz tworzyć animacje i wyświetlać je w trybie blokady na wszystkich klientach obszaru roboczego. Zmiany w rysunkach zostaną automatycznie przekazane wszystkim klientom.

Animacje

Jak widać w wersji demonstracyjnej, możemy ponownie wykorzystać interfejs requestAnimationFrame() do generowania animacji. To świetnie, bo po połączeniu elementów powiązanie między CSS i elementem Canvas jest zachowywane. Nie ma potrzeby zaprzątania sobie głowy interfejsem DOM.

Demonstracja nie jest animowana w Chrome?

W bieżącej wersji stabilnej Chrome (wersja 23) znajduje się adres crbug.com/161699, który uniemożliwia prawidłowe zaktualizowanie tła przez animację requestAnimationFrame(). Ten błąd został naprawiony w Chrome 25 (obecnie w wersji Canary). Wersja demonstracyjna powinna też dobrze działać w bieżącej wersji Safari.

Korzyści z wydajności

Chodzi nam o płótno. Animacja z akceleracją sprzętową jest teraz w pełni aktywna (przynajmniej w przeglądarkach, w których ta funkcja działa). Przypominamy, że nie ma potrzeby usuwania DOM z JS.

Używanie webgl jako tła

Poczekaj chwilę. Czy to oznacza, że możemy obsługiwać tło CSS za pomocą webgl? Oczywiście, że tak. WebGL to jedynie trójwymiarowy kontekst dla płótna. Zamień na „experimental-webgl” zamiast „2d” i gotowe.

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

Oto przykład koncepcyjny zawierający element div z tłem narysowanym za pomocą cieniowania wierzchołków i fragmentów: DEMO

Inne podejścia

Warto zauważyć, że Mozilla od dłuższego czasu używa identyfikatora -moz-element() (MDN). Jest to część specyfikacji CSS Image Value and Replaced Content Module Level 4 i umożliwia tworzenie obrazów generowanych z dowolnego kodu HTML: filmów, obiektów canvas, treści DOM itd. Istnieją jednak problemy z zabezpieczeniami związane z pełnym dostępem do obrazów zrzutów DOM. Głównie dlatego w innych przeglądarkach nie obsługują one tej funkcji.