HTML5

Crear animaciones en canvas con Java Script

En esta ocasión veremos cómo crear animaciones en canvas con Java Script, para realizar esta tarea vamos a seguir con el tutorial en el cual explicamos cómo dibujar un cuadrado en canvas, así que antes de comenzar les recomiendo que pasen por ese tutorial.

Cómo crear animaciones en canvas con Java Script

Siguiendo con el tutorial anterior y ya habiendo dibujado un cuadrado en canvas, ahora vamos a crear una animación sobre ese mismo cuadrado.

Esta animación va a permitir que el cuadrado se mueva de izquierda a derecha de forma infinita. Primero vamos a obtener el contexto del elemento canvas para poder dibujar.

var canvas = document.getElementById("micanvas");
var contexto = canvas.getContext('2d');

Luego vamos a definir las variables que vamos a utilizar, como por ejemplo para la posición del cuadrado o para el tiempo de actualización del mismo.

var posX = 0;
var posY = 0;
tiempo =  1000 / 10; // Aproximadamente 10 frames por segundo

Y finalmente vamos a utilizar la función setInterval para ir actualizando la posición del cuadrado en aproximadamente 10 frames por segundo:

setInterval(function(){
		
  // Eliminar el dibujo del cuadrado anterior
  contexto.clearRect(posX, posY, canvas.width, canvas.height);
		
  // Incrementando en 1 la posición x del cuadrado
  // Si llega al extremo derecho vuelve a su posición inicial
  posX = (posX + 1) % (canvas.width - 50);
		
  // Dibujar nuevamente el cuadrado
  contexto.fillStyle = "#FFBD16";
  contexto.fillRect(posX, posY, 50, 50);
		
}, tiempo);

A continuación les dejo el código completo para que lo puedan probar y analizar:

<!DOCTYPE html>
<html>
  <head>
    <title>Crear animaciones en canvas con Java Script</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
  </head>
  <body>
    <canvas id="micanvas" width="200" height="200">
      Contenido que sólo verán los usuarios que no soportan canvas en su navegador.
    </canvas>
    <script language="JavaScript">
      window.onload = function(){
      	var canvas = document.getElementById("micanvas");
      	var contexto = canvas.getContext('2d');
      
        // Posición x, y del cuadrado
        var posX = 0;
        var posY = 0;
      
        // Aproximadamente 10 frames por segundo, se va a dibujar el cuadrado
        tiempo =  1000 / 10; 
      
        setInterval(function(){
      
          // Eliminar el dibujo del cuadrado anterior
          contexto.clearRect(posX, posY, canvas.width, canvas.height);
      
          // Incrementando en 1 la posición x del cuadrado
          // Si llega al extremo derecho vuelve a su posición inicial
          posX = (posX + 1) % (canvas.width - 50);
      
          // Dibujar nuevamente el cuadrado
          contexto.fillStyle = "#FFBD16";
          contexto.fillRect(posX, posY, 50, 50);
      
        }, tiempo);
      
      }
    </script>
  </body>
</html>

Bueno gente, eso es todo lo básico que se necesita entender para crear animaciones en canvas con Java Script. Espero que les sea de gran utilidad y ante cualquier problema no duden en enviar un comentario.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *