Animar una pelota con HTML5 canvas y Javascript

Stay hungry, stay foolish

Steve Jobs

El ejercicio del día consiste en animar una pelota para que rebote por el escenario utilizando canvas de HTML5 y jQuery

Canvas

Es un elemento HTML incluido en el estándar HTML5 que permite la creación de gráficos los cuales pueden ser accedidos mediante código javascript.

HTML

Lo primero que tenemos que hacer es crear el elemento canvas en el código HTML de nuestra página, podemos indicar el ancho y alto de este elemento con los atributos width y height respectivamente


<canvas id="lienzo" width="700" height="500">

 </canvas>

Javascript

Ahora vamos a comenzare a dibujar la pelota y agregar la animación utilizando la librería jQuery.

Lo primero es incluir la librería jQuery con la siguiente linea dentro de la etiqueta <head>


<script src="jquery.js" type="text/javascript"></script>

Ahora comenzamos con el código de jQuery

Lo primero que vamos a hacer es crear 4 variables x, y para controlar la posición de la pelota y movx, movy para controlar que tanto se va a desplazar


var x = 350;
 var y = 250;
 var movx = 5;
 var movy = 3;

Seguido de esto colocamos la declaración $(document).ready para asegurarnos que el código se ejecute una vez que todo el contenido de la pagina este listo para su manipulación, en dicha declaración le indicamos que ejecute la función inicio que se encargara de llamar a la función movimiento, la cual contiene el código para que la pelota se mueva por el canvas


$(document).ready(inicio);
function inicio(){
    movimiento();
 }

La función movimiento tiene el siguiente código: comenzamos seleccionando el elemento canvas que creamos en el HTML y lo asignamos a la variable lienzo, posteriormente creamos una variable contexto en la cual le indicamos que vamos a trabajar con el contexto 2d de canvas.

function movimiento(){
    var lienzo = document.getElementById("lienzo");
    var contexto = lienzo.getContext("2d");

Luego vamos a colocar dos condicionales la primera se encargara de controlar cuando la pelota llegue al principio o fin del canvas en el eje X, cuando eso pase la variable movx se multiplica por -1 para que cambie de direccion, lo mismo se hace con el eje Y. Despues se suma a las variables x,y los valores de movx y movy con esto se obtiene la siguiente posicion de la pelota

    if( x >= 680 || x <= 20 )
       movx = movx*-1;
    if( y >= 480 || y <= 20 )
       movy = movy*-1;
    x = x+movx;
    y = y+movy;

Ahora comenzamos con el dibujo de la pelota, lo primero es indicarle al canvas que vamos a empezar a dibujar un nuevo camino, posteriormente limpiamos el lienzo debido a que cada vez que se ejecute la función movimiento debemos eliminar la posición anterior de la pelota para después volver a re dibujarla. Tambien podemos indicar el colo de la pelota con utilizando fillstyle, después se dibuja el circulo con el método arc el cual recibe los siguientes parámetros: eje x, eje y, radio, angulo inicial, angulo final y el sentido en el que se dibujará. Por ultimo se llama al metodo fill para que el arco se rellene con el color indicado anteriormente.

 contexto.beginPath();
 contexto.clearRect(0,0,700,500);
 contexto.fillStyle="rgb(255,0,0)";
 contexto.arc(x, y, 20, 0, 360,false);
 contexto.fill();

Ahora solo falta hacer que la función movimiento se ejecute de forma indefinida cada cierto tiempo para completar la animacion y lo hacemos con el método setTimeout que se encargara de llama a la funcion movimiento cada 20 milisegundos

setTimeout("movimiento()",20);
}

Eso es todo por hoy, si el contenido del blog les es de utilidad recomiendenlo,dejen sus comentarios y sigan practicando, aquí les dejo el demo de este ejercicio el código completo lo pueden tomar de ahí, hasta luego.
demo