Trayectoria circular con Canvas

31 de Julio de 2011.

Categorías: Canvas , html5

Canvas permite animar objetos siguiendo todo tipo de trayectorias. En este tutorial, vamos a ver como mover un objeto a través de una trayectoria circular. Por suerte, no es necesario escribir mucho código ni tampoco tener muchos conocimientos de trigonometría.

El concepto es simple. Solamente necesitamos conocer el círculo sobre el que queremos mover el objeto, e ir variando el ángulo en casa paso de la animación.

Pasos a seguir:

Esqueleto del documento HTML5
Crear el bucle de la animación
Dibujar el círculo que usaremos como trayectoria
Dibujar y animar un objeto siguiendo la trayectoria circular

Esqueleto del documento HTML5:


<!DOCTYPE HTML>
<html>
	<head>
		<title>Animación con trayectoria circular</title>
		<script type='text/javascript>

		<script>
	</head>
	<body>
		<canvas id ="canvas" width="400" height="400" ></canvas>
	</body>
</html>

Hasta ahora sólo hemos creado un esqueleto de un documento HTML5 al que se le ha añadido una etiqueta canvas de 400x400 a la que se le ha puesto en el documento css un borde y un color de fondo.

Crear el bucle de la animación:

Vamos a añadir un botón para iniciar y parar la animación, para ello, añadimos el siguiente código debajo de la etiqueta canvas:


<div id='controles'>
	<input type="button" value="Iniciar/Parar" id="iniciar" onclick="init()">
</div>

Ahora, dentro de la sección javascript, añadimos lo siguiente:


//Declaración de variables globales
var ctx = null;
var t = null;

function init()
{
	//Obtener el contexto 2d
	if(ctx == null)
		ctx = document.getElementById('canvas').getContext('2d');
		
	//Iniciar la animación si t es null, o pararla si no lo es
	if(t == null)
		t = setInterval("anima()",30);
	else
	{
		clearInterval(t);
		t = null;
	}
}
function anima()
{
	ctx.clearRect(0,0,400,400);
}

Al pulsar el botón, se iniciará la animación, llamando a la función anima() 30 veces por segundo, pero como la única instrucción que tiene es ctx.clearRect(0,0,400,400); solamente se limpiará el lienzo constantemente, por lo que todavía no apreciaremos nada visualmente.

Dibujar el círculo que usaremos como trayectoria:

Vamos a dibujar un círculo con un radio de 150 píxeles desde el centro de la etiqueta canvas, en nuestro caso, como mide 400x400 el centro es el punto x=200, y=200;

Declaramos la variable global radio, con un valor de 150, así como las variables x e y que marcarán el centro de la circunferencia:

	var ctx = null;
	var t = null;
	var radio = 150;
	var x = 200;
	var y = 200;

Y en la función anima(), dibujamos la circunferencia:

function anima()
{
	ctx.clearRect(0,0,400,400);
	ctx.arc(x,y,radio,0,Math.PI*2,true);
	ctx.closePath();
	ctx.stroke();
}

Si todo ha ido bien, al pulsar el botón deberíamos ver algo como esto:

Dibujar y animar un objeto siguiendo la trayectoria circular:

Por fin llegamos al punto en donde animaremos el objeto siguiendo la trayectoria circular, como expliqué antes, solamente tenemos que calcular las posiciones x e y de la circunferencia mientras se va aumentando el ángulo en cada intervalo de la animación, luego dibujamos el objeto que queramos en esas posiciones. Vamos a ver el código, es más simple de lo que parece.

Añadimos unas variables que nos harán falta, tmpx y tmpy serán las posiciones x e y del objeto en movimiento y la variable angulo:

var tmpx = 0;
var tmpy = 0;
var angulo = 0;

Y en la función anima() añadimos lo siguiente:


tmpx = x + ( radio*Math.cos(angulo*(Math.PI*2)));
tmpy = y + ( radio*Math.sin(angulo*(Math.PI*2)));
					
angulo += 0.01;
			
ctx.beginPath();
ctx.fillRect(tmpx-10,tmpy-10,20,20);
ctx.fillStyle = 'red';
ctx.fill();
ctx.closePath();

Usamos las funciones trigonométricas para calcular las posiciones tmpx y tmpy en función del angulo, luego aumenta el valor del ángulo y dibujamos el objeto animado, en nuestro caso, un cuadrado de color rojo de ancho = 20 y alto = 20. A la hora de dibujarlo: ctx.fillRect(tmpx-10,tmpy-10,20,20);, se corrigen los valores de tmpx y tmpy restándole 10 a cada uno ( la mitad del ancho y alto del cuadrado) para que quede centrado en la trayectoria. El resultado es el siguiente:

0 comentarios

Introduzca su comentario:

Nombre:
Comentario: