2010-02-25 11 views
8

Estoy tratando de recrear una animación tipo flipping de página en HTML5 utilizando canvas. La animación se basa en ideas del this page. Pero eso no es realmente importante. El problema que estoy teniendo es que usar la operación compuesta 'fuente-en' no me da los resultados que espero y me gustaría una aclaración de por qué. Creo que solo funciona en Chrome, no funciona en FF 3.6.Composición de Canvas HTML5 (fuente-en)

Se supone que el rectángulo negro actúa como una "máscara" para la página que se está volcando. Todo lo que quiero ver es la página de giro en las áreas donde se superpone la máscara. El problema es que se dibuja todo el rectángulo negro, no solo el área donde se superponen.

Sé que HTML5 todavía no se usa, solo estoy experimentando por mi sitio personal y mi curiosidad. Cualquier idea sería muy apreciada.

+2

HTML5, aunque todavía es experimental, ya se está utilizando y el soporte del navegador tampoco es tan malo. – Tronic

+1

El código de muestra es un enlace roto. Preguntándose si esto debería cerrarse, ya que parece demasiado específico, y el ejemplo para ver ya no existe. Preguntándose si debe haber una respuesta de "proyecto abandonado". – artlung

Respuesta

5

El soporte de composición de Canvas se rompió y puede que aún esté incompleto en algunos navegadores.

Compare el images here con the actual rendering en su navegador para ver qué funciona en qué navegador en este momento.

+0

Ha pasado un año desde que publicó este comentario. Parece que Firefox 4 está bien. Chrome 11 falla en la fuente de entrada (se ve como fuente en la parte superior), fuente de salida (se ve como xor), entrada de destino (no copia nada), destino en la parte superior (parece destino) y copia (se ve como fuente-sobre). Eso es un poco decepcionante, pero al menos debería ser seguro usar los otros. ¿Alguien puede probar esto en IE9? – mgiuca

+2

Seis meses después. Chrome 15 es bueno para todos ellos. Firefox 8 ya no es más oscuro. IE9 no cargará la página en absoluto (algún tipo de error sobre el evento de carga), por lo que no puedo decir qué es lo que soporta. – snostorm