Immagini di sfondo create con canvas

Eric Bidelman

Animazione delle immagini di sfondo tramite codice

Esistono due modi principali per animare le immagini di sfondo:

1. Utilizza gli sprite CSS per aggiornare un background-position in JS .
2. Hack con .toDataURL() .

La prima è perfetta se hai l'immagine in anticipo, ma che succede se l'origine deve essere generata tramite programmazione, ad esempio da un <canvas>? La soluzione al problema 1 è utilizzare .toDataURL() sulla tela e impostare lo sfondo sull'URL generato:

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

Esistono due problemi:

1. Gli URL data: aggiungono un sovraccarico delle dimensioni di circa il 33% all'immagine risultante.
2. Un sacco di tocchi DOM (el.style).

Entrambi questi metodi sono inefficienti: inaccettabili per un'app web sempre fluida a 60 fps.

Utilizzo di una tela 2D come sfondo

DEMO

A quanto pare, esiste un'API non standard che WebKit ha da anni che può utilizzare Canvas come origine per uno sfondo. Purtroppo, però, non sono state pubblicate specifiche per questa funzionalità.

Innanzitutto, anziché specificare un URL per il pulsante Indietro:

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

utilizza -webkit-canvas(), facendo riferimento a un identificatore di stringa per un contesto canvas:

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

Successivamente, dobbiamo creare il contesto 2D con una versione speciale di .getContext():

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

Nota: questo metodo si trova nell'oggetto document e non nella tela. Il secondo argomento è lo stesso nome utilizzato in -webkit-canvas().

Ulteriori informazioni di Dave Hyatt:

Nota: esiste un solo canvas CSS per un determinato identificatore globale per documento. Quando ottieni il contesto del disegno, specifichi anche le dimensioni. La tela non verrà cancellata se richiedi ripetutamente le stesse dimensioni. La specifica di una nuova dimensione è equivalente al tipo di comportamento che ti aspetteresti se ridimensionassi un elemento <canvas>, pertanto il buffer della tela verrà cancellato.

Nota: tutti gli oggetti che osservano una tela CSS con lo stesso nome la condividono. Ciò significa che, in modo simile al funzionamento delle GIF animate, puoi creare animazioni e farle eseguire in modo sincronizzato su tutti i client della tela. Le modifiche ai disegni verranno propagate automaticamente a tutti i clienti.

Animazioni

Come mostrato nella demo, possiamo riutilizzare requestAnimationFrame() per gestire un'animazione. Questo è fantastico, perché una volta collegati, l'associazione tra CSS e l'elemento canvas viene preservata. Non è necessario modificare il DOM.

La demo non è animata in Chrome?

L'attuale canale stabile di Chrome (versione 23) presenta il problema crbug.com/161699, che impedisce a un'animazione requestAnimationFrame() di aggiornare correttamente lo sfondo. Il problema è stato risolto in Chrome 25 (attualmente Canary). La demo dovrebbe funzionare bene anche nella versione corrente di Safari.

Vantaggi in termini di rendimento

Stiamo parlando di canvas. Le animazioni con accelerazione hardware sono ora completamente disponibili (almeno per i browser in cui funziona questa funzionalità). E, per ripeterlo, non è necessario molestare il DOM da JS.

Utilizzo di WebGL come sfondo

Aspetta un attimo. Questo significa che possiamo creare uno sfondo CSS utilizzando WebGL? Certo che sì. WebGL è semplicemente un contesto 3D per Canvas. Basta sostituire "experimental-webgl" con "2d" e il gioco è fatto.

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

Ecco una prova del concetto che contiene un elemento div con lo sfondo disegnato utilizzando gli shader vertex e fragment: DEMO

Altri approcci

Vale la pena notare che Mozilla ha -moz-element() (MDN) da un po' di tempo. Fa parte della specifica Livello 4 del modulo Valori immagine CSS e contenuti sostituiti e ti consente di creare un'immagine generata da HTML arbitrario: video, canvas, contenuti DOM e così via. Tuttavia, l'accesso completo alle immagini istantanee del DOM presenta problemi di sicurezza. Questo è il motivo principale per cui altri browser non hanno adottato questa funzionalità.