En HTML5, ¿cómo puedo dibujar fácilmente (sin código demasiado complejo por favor) un GIF animado en un lienzo que funciona (con drawImage sólo el primer fotograma se muestra en el lienzo) animaciónGIF animado en canvas de HTML5
lienzo no es parte de la especificación HTML5. O bien volver a GIF o considerar una biblioteca basada en JavaScript que hace SVG o vuelve a caer a la lona/VML: http://raphaeljs.com/
Creo que busca http://slbkbs.org/jsgif
Por desgracia, el DOM no expone cuadros individuales de un GIF, así que esto se hace descargando el GIF (con XMLHttpRequest), analizándolo y dibujándolo en un
<canvas>.
Bueno, si la animación de lienzo automatizada de los archivos .gif no está disponible, puede intentar usar hojas de sprites, pero eso de hecho requeriría un poco más de código.
var img_obj = {
'source': null,
'current': 0,
'total_frames': 16,
'width': 16,
'height': 16
};
var img = new Image();
img.onload = function() { // Triggered when image has finished loading.
img_obj.source = img; // we set the image source for our object.
}
img.src = 'img/filename.png'; // contains an image of size 256x16
// with 16 frames of size 16x16
function draw_anim(context, x, y, iobj) { // context is the canvas 2d context.
if (iobj.source != null)
context.drawImage(iobj.source, iobj.current * iobj.width, 0,
iobj.width, iobj.height,
x, y, iobj.width, iobj.height);
iobj.current = (iobj.current + 1) % iobj.total_frames;
// incrementing the current frame and assuring animation loop
}
function on_body_load() { // <body onload='on_body_load()'>...
var canvas = document.getElementById('canvasElement');
// <canvas id='canvasElement' width='320' height='200'/>
var context = canvas.getContext("2d");
setInterval((function (c, i) {
return function() {
draw_anim(c, 10, 10, i);
};
})(context, img_obj), 100);
}
Así es como abordaría el problema. Espero que esto haya sido de ayuda. (probado)
Este es un poco viejo. La forma en que lo abordaría ahora sería muy diferente. Si no le importa agregar una nueva biblioteca a su código, use una de las muchas alternativas disponibles sugeridas en estos comentarios. Teniendo en cuenta el advenimiento de ES6, esto se reconstruiría mejor como una clase con mucha más funcionalidad. :) –
Para cualquier persona que todavía tenga problemas con esto, o aquellos que no quieran cargar sus imágenes dinámicamente o averiguar cuántos marcos necesitan usar;
Deje el GIF animado en la página HTML, configúrelo para mostrar: bloque, visibilidad: visible y posición: relativo en el CSS. Sitúelo dinámicamente debajo del lienzo con un margen negativo superior/z-índice (o lo que sea). Luego configure un temporizador de JavaScript que invoque a drawImage repetidamente, tan rápido como lo necesite para refrescar la imagen correctamente.
Si la imagen no está visible en el DOM, la rutina drawImage no puede adquirir cuadros posteriores de la animación. Si la imagen está absolutamente posicionada debajo del lienzo, la reproducción se retrasa.
No puedes hacer capas como esta a menos que pongas varios lienzos uno encima del otro – trinalbadger587
Oh, ¿había cambiado a finales de 2016? Porque funcionaba bien cuando lo hice tanto en Chrome como en el VTC1010 en 2014. – Ayelis
Bueno, como ya han dicho otras personas, tienes que dividir la animación en cuadros. Mi forma de abordar el problema es más una preferencia personal, pero abro el GIF en GIMP y, usando un complemento, convierto todos los cuadros que se muestran como capas individuales en una hoja de sprites. Entonces solo tengo que animar el sprite en el lienzo, que es mucho más fácil.
Aquí es el link para el plugin: D
Esto puede ser útil: https://github.com/matt-way/gifuct-js – JoeRocc