Cómo utilizar el lienzo para lograr efectos de animación en HTML5
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.