Blog
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.