Cómo utilizar el lienzo para lograr efectos de animación en HTML5

Se pueden lograr rápidamente efectos de animación simples utilizando el lienzo HTML5. Los principios básicos son los siguientes:

Dibuje y borre gráficos con regularidad para simular el proceso de animación. Puede utilizar el método context.clearRect(0, 0, x, y) para actualizar los gráficos que deben dibujarse.

El primero es el método de dibujo, de la siguiente manera:

¿Función? miAnimación()? {

ctx.clearRect(0,?0,?canvas_size_x,?canvas_size_y);

¿Si? (x_icon?<?0?||?x_icon?>?canvas_size_x?-?size_x)? {

pasoX? =?-stepX;

}

¿Si? (y_icon?<?0?||?y_icon?>?canvas_size_y?-?size_y)? {

Stebe. =?-Stebe;

}

x_icon? +=?pasoX

y_icon? +=?stepY

ctx.drawImage(anim_img,?x_icon,?y_icon);

}El método anterior borra el contenido del lienzo a intervalos y recalcula la posición del dibujo. Una vez que se excede el tamaño del lienzo, las coordenadas se invierten para dibujar la forma.