Immagini di sfondo create con canvas

Animare le immagini di sfondo a livello di programmazione

Esistono due modi principali per animare le immagini di sfondo:

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

Il primo metodo è ideale se hai l'immagine in anticipo, ma cosa succede se l'origine deve essere generata in modo programmatico, ad esempio da un <canvas>? La soluzione al problema n. 1 consiste nell'utilizzare .toDataURL() sul canvas e impostare lo sfondo sull'URL generato:

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

Ciò comporta due problemi:

  1. Gli URL data: aggiungono un overhead di dimensioni di circa il 33% all'immagine risultante.
  2. Un sacco di modifiche al 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 di Canvas come sfondo
DEMO

Esiste un'API non standard che WebKit ha da anni e che può utilizzare canvas come origine per uno sfondo. Purtroppo, però, non esiste una specifica pubblicata 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 in 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);

Ulteriori informazioni di Dave Hyatt:

Animazioni

Come mostrato nella demo, possiamo riutilizzare requestAnimationFrame() per animare. Questo è un vantaggio perché, una volta configurato il tutto, l'associazione tra CSS e l'elemento canvas viene mantenuta. Non è necessario modificare il DOM.

La demo non è animata in Chrome?

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

Vantaggi in termini di prestazioni

Stiamo parlando di tela. Le animazioni con accelerazione hardware sono ora completamente in funzione (almeno per i browser in cui questa funzionalità è disponibile). E, per ribadire, non è necessario manipolare il DOM da JavaScript.

Utilizzare WebGL come sfondo

Un attimo. Significa che possiamo alimentare uno sfondo CSS utilizzando WebGL? Certo che sì. WebGL è semplicemente un contesto 3D per canvas. Basta sostituire "2d" con "experimental-webgl" e il gioco è fatto.

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

Ecco una prova di concetto che contiene un div con lo sfondo disegnato utilizzando gli shader di vertici e frammenti: DEMO

Altri approcci

È importante notare che Mozilla ha -moz-element() (MDN) da un po' di tempo. Fa parte della specifica CSS Image Values and Replaced Content Module Level 4 e ti consente di creare un'immagine generata da HTML arbitrario: video, canvas, contenuti DOM e così via. Tuttavia, esistono problemi di sicurezza relativi all'accesso completo alle immagini degli snapshot del DOM. Questo è il motivo principale per cui altri browser non hanno adottato questa funzionalità.