2010-02-25 3 views
8

Sto tentando di ricreare un'animazione di tipo lanciante di pagina in HTML5 mediante canvas. L'animazione è basata su idee dal this page. Ma non è molto importante. Il problema che sto riscontrando è che l'utilizzo dell'operazione composita "source-in" non mi dà i risultati che mi aspetto e vorrei chiarire il perché. Penso che funzioni solo su Chrome, non lavorando su FF 3.6.HTML5 Compositing canvas (origine)

Il rettangolo nero si suppone che funga da "maschera" per la rotazione della pagina. Tutto ciò che voglio vedere è la pagina di svolta nelle aree in cui si sovrappone alla maschera. Il problema è che viene disegnato l'intero rettangolo nero, non solo l'area in cui si sovrappongono.

So che HTML5 non è ancora in uso, sto solo sperimentando per il mio sito personale e la mia curiosità. Qualsiasi idea sarebbe molto apprezzata.

+2

HTML5, pur essendo ancora sperimentale, è già in uso e il supporto del browser non è poi così male. – Tronic

+1

Il codice di esempio è un collegamento interrotto. Mi chiedo se questo dovrebbe essere chiuso in quanto appare troppo specifico e l'esempio di visualizzazione non esiste più. Mi chiedo se ci debba essere una risposta "progetto abbandonato". – artlung

risposta

5

Il supporto Compositing su tela era rotto e potrebbe essere ancora incompleto in alcuni browser.

Confronta il images here con the actual rendering nel tuo browser per vedere cosa funziona in quale browser in questo momento.

+0

È passato circa un anno da quando hai postato questo commento. Sembra che Firefox 4 sia tutto a posto. Chrome 11 fallisce il source-in (sembra come source-atop), source-out (assomiglia a xor), destination-in (non copia nulla), destination-atop (assomiglia a destination-over) e copy (assomiglia a fonte-over). Questo è un po 'deludente, ma almeno dovrebbe essere sicuro di usare gli altri. Qualcuno può testarlo in IE9? – mgiuca

+2

Sei mesi dopo. Chrome 15 è buono su tutti loro. Firefox 8 non supporta più il dark. IE9 non caricherà affatto la pagina (una sorta di errore sull'evento onload), quindi non posso dire cosa supporta. – snostorm