Obrazy tła tworzone na płótnie

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

Odbitka na płótnie jako wersja demonstracyjna w tle
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);

Więcej informacji od Dave'a Hyatta:

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.