Animar una pelota con HTML5 canvas y Javascript

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

16 comentarios en “Animar una pelota con HTML5 canvas y Javascript”

  1. Antonio dice:

    Hola, muy bien explicado todo, pero tengo una duda, si quiero poner una imagen, en vez de dibujarla, que tendría que sustituir, contexto.arc, y contexto.fill(), por la imagen?.

    Un saludo

    1. denker dice:

      Hola amigo si quieres colocar una imagen el codigo quedaria de esta manera

      var img = new Image(200,200);
      img.src = "img.jpg";
      contexto.clearRect(0,0,700,500);
      contexto.drawImage(img, x, y);

      1. Antonio dice:

        Hola gracias por responder tan pronto, yo he estado liado, por eso el tardar.
        Lo he probado, y he sustituido la parte del código, que pones el dibujo de la pelota, por el fragmento que me has dado, pero no me funciona. Pongo la explicación que le doy a cada parte del código que me mandas, a ver si la entiendo:
        * var img = new Image(200,200); –> se declara la variable, y la situamos en pantalla
        * img.src = “img.jpg”; –> cogemos la imagen de la carpeta
        * contexto.clearRect(0,0,700,500); –> esto que seria como el metodo arc, los dos primeros parametros serian la posición y los segundos el tamaño
        * contexto.drawImage(img, x, y) –> la img seria la imagen a dibujar, en el canvas, y los parámetros el sitio.

        Dime si algo no he entendido, y por eso no me funciona, estoy haciendo mi propia animación, con otros datos, y si no lo entiendo no me funcionará.
        Gracias.

        1. denker dice:

          Hola.
          Asi es, la variable img se encarga de almacenar la imagen que se va a mostrar en el canvas, recuerda que la imagen debe estar en la misma carpeta que tu archivo HTML. y contexto.clearRect se utiliza para limpiar el canvas de lo contrario la imagen va a ir dejando un rastro.

  2. melvin dice:

    donde encuentro la clase jquery por eso no funciona

  3. Manuel dice:

    Hola amigo si quisiera ponerle una pausa en cuanto coloque el mouse sobre la pelotita el codigo cambiaria mucho?

  4. daniel dice:

    buen articulo, hay poca documentación en español

  5. Danilo dice:

    Estimado, buen post-!!!! una consulta si quisiera yo darle el movimiento exacto a la imagen como seria??????

  6. Pablo dice:

    Hola Denker,

    estoy haciendo un proyecto final de grado, que consiste en integrar herramientas de simulación de discapacidad en un editor web, para la programación de la simulación de distracción me basé en tu código “Animar una pelota con HTML5 canvas y JavaScript”, la tutora del proyecto me pide tu nombre completo y dirección de email para ponerlos en el proyecto. Si puedes envíame tus datos a este correo: pablo.w7.rg@gmail.com

  7. Isa dice:

    Muchas gracias! Muy útil y muy bien explicado!

  8. Paul dice:

    Hola Denker,

    que tipo de licencia tiene tu código “Animar una pelota con HTML5 canvas y Javascript” ?

    1. denker dice:

      Hola amigo, la licencia es licencia de Creative Commons Reconocimiento 4.0 Internacional.

  9. Hola Denker.

    Gracias por su publicación. Muy bien explicado. Me sirvio de base para hacer la animación con la imagen de un balon sin jQuery. Comparto el codigo.

    Animación balón – Canvas

    var x = 350;
    var y = 250;
    var movx = 4;
    var movy = 2;

    window.onload = function () {
    movimiento();
    }

    function movimiento(){
    var lienzo=document.getElementById(“lienzo”);
    var contexto = lienzo.getContext(‘2d’);

    var img = new Image(200,200);
    img.src = “http://emoji.fileformat.info/gemoji/soccer.png”;

    if( x >= 650 || x = 450 || y <= 0 )
    movy = movy*-1;
    x = x+movx;
    y = y+movy;

    contexto.clearRect(0,0,700,500);
    contexto.drawImage(img, x, y);

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

    canvas{border:1px solid #000; }

    1. hola puedes mostrar el codigo completo

  10. Excelente articulo, sigue asi !!!!

Deja un comentario