html5 - imagenes - animaciones para paginas web

Animación cuadro por cuadro en HTML5 con lienzo

Question

Tengo una animación flash que estoy tratando de convertir a HTML5. Ahora he sacado todas las imágenes. Por ejemplo, en la animación de mano, tomé imágenes de todas las imágenes de mano. He hecho el lienzo con el dibujo base, pero no sé cómo reemplazar esas imágenes fotograma por fotograma.

function draw(){
    var canvas = document.getElementById(''canvas'');
    if(canvas.getContext){
        // canvas animation code here:
        var ctx = canvas.getContext(''2d'');

        var lhs = new Image();

        lhs.src = "images/left_hnd_1.png";

        lhs.onload = function(){
            ctx.drawImage(lhs, 293, 137);
        }

    } else {
        // canvas unsupported code here:
        document.getElementById(''girl'').style.display = "block";
    }
}

Ahora tengo tres marcos más para esta imagen. left_hnd_2.png, left_hnd_3.png y left_hnd_4.png. Hubiera usado una imagen, pero la diferencia en marcos es demasiado para que se pueda hacer con una imagen. ¿Cómo puedo animar esto con las diferencias de tiempo que quiero?

Cualquier idea sería muy apreciada. ¡Gracias!

Answer 1

Prueba esto:

var imgNumber = 1;
var lastImgNumber = 4;

var ctx = canvas.getContext(''2d'');
var img = new Image;
img.onload = function(){
  ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height );
  ctx.drawImage( img, 0, 0 );
};
var timer = setInterval( function(){
  if (imgNumber>lastImgNumber){
    clearInterval( timer );
  }else{
    img.src = "images/left_hnd_"+( imgNumber++ )+".png";
  }
}, 1000/15 ); //Draw at 15 frames per second

Una alternativa, si solo tiene 4 imágenes, sería crear una sola imagen grande con las cuatro en un ''atlas de textura'', y luego usar setTimeout o setInterval para llamar a drawImage() con diferentes parámetros para dibujar diferentes subconjuntos de la imagen el lienzo.

Answer 2

¡Esto funcionó para mí también! Por alguna razón, no funcionó cuando utilicé el código de apertura de OP: function draw(){

Sin embargo, cuando utilicé: window.onload = function draw() { la animación se reproduce en el lienzo. También estoy usando alrededor de 150 imágenes PNG con un canal Alpha, así que esta es una gran manera de traer ''video'' o crear compuestos en el iPad / iPhone. Confirmo que funciona en iPad iOS 4.3.