Tictac Soluciones Informáticas > Diseño web > Canvas HTML5: animaciones I

Canvas HTML5: animaciones I

En el artículo anterior vimos como usar el canvas para dibujar figuras sencillas. Se pueden hacer dibujos mucho más complejos, pero la gran utilidad del canvas es hacer animaciones, así que vamos a ver las bases de la animación en canvas.
Necesitamos una función de pintado que se llame sucesivamente para ir pintando cada frame de la animación. Veremos métodos mejores, pero por ahora vamos a usar lo más básico, un temporizador:
setTimeout(pintar,100);
Esta será la última línea de la función pintar, que se llama a si misma cada 100 milisegundos, así que pintamos 10 veces por segundo, por lo que veremos claramente los saltos de la animación y no será fluida, pero para el ejemplo nos sirve.
Lo que vamos a animar es un rectángulo haciendo que se mueva un poco a los lados, con una función de traslación (muy similar a las que vimos para CSS3):
ctx.translate(t,0);
Donde t será cuanto desplazamos el cuadrado, y será una variable que incrementemos o reduzcamos en cada pintada. Con esto nos quedaría una animación como la siguiente:

#canvas21{

width: 500px;

height: 300px;

margin: 0 auto;

display:block;

border: 1px solid #000;

}

var t=0;

var derecha=true;

var canvas21=document.getElementById(“canvas21”);

var ctx21 = canvas21.getContext(“2d”);

function pintar21(){

if (derecha){

t+=10;

if (t>100){

derecha=false;

}

}else{

t-=10;

if (t100){

derecha2=false;

}

}else{

t2-=10;

if (t2

2018-07-02T17:35:46+00:0016/10/2012|Diseño web, HTML5|

Deje su comentario