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 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:

0 comentarios

Seguir leyendo...

Clases con javascript: la propiedad prototype

27 de Junio de 2011.

Categorías: Javascript

Dentro de las múltiples posibilidades que nos ofrece Javascript, se encuentra la de crear objetos y clases al estilo tradicional. Aunque no es una de las características más conocidas ni utilizadas de este lenguaje, cuyas funciones más habituales son la manipulación del DOM, validaciones y peticiones AJAX, la posibilidad de programar utilizado el paradigma POO se vuelve cada vez más útil y necesario, sobre todo desde la llegada del estándar HTML5, que abre un nuevo abanico de posibilidades al mundo Javascript.

A pesar de que todo lo que se puede hacer con clases y objetos en Javascript, se puede hacer sin ellas, no cabe duda que la programación orientada a objetos nos ofrece una serie de ventajas y "comodidades" que cuanto menos, son dignas de mencionarse.

Comenzamos:

Javascript es un lenguaje orientado a prototipos, por lo tanto, la sintaxis que se utiliza para la creación de clases es ligeramente diferente a lo que estamos acostumbrados en otros lenguajes más tradicionales.

Nota: Existen multitud de formas de crear objetos y clases en Javascript, pero en este tutorial solamente se va a explicar una de ellas.

Constructor:

	function Persona()
	{
	}
	var juan = new Persona();
	var pepe = new Persona();

Y así de fácil hemos creado una clase en Javascript. Esto es así porque como hemos dicho anteriormente, estamos tratando con un lenguaje basado en prototipos, y cada función sirve como constructor de un objeto.

1 comentarios

Seguir leyendo...