HTML5 canvas. Ejemplo de Cielo Estrellado

Una de las principales novedades de HTML5 es el objeto canvas, que como su nombre indica es un lienzo en el que podemos pintar con Javascript el contenido, realizar transformación, pegar imágenes, etcétera. Las demos más llamativas de HTML5 están realizadas utilizando este componente. Es la esperanza para eliminar Flash del mundo Web.

En esta ocasión vamos a ver cómo utilizar el canvas para cear un cielo estrellado que se va pintando poco a poco. Para ello se creará un canvas de fondo negro de dimensiones determinadas y se irán pintando puntos -en realidad líneas de un píxel de longitud- para simular las estrellas.

El primer paso consiste en crear la página de HTML5 que contiene el canvas. No puede ser más sencilla:

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<canvas id="entorno_canvas" style="border:1px solid black; background-color:black" width="800" height="600">
</canvas>
</body>
</html>

El nuevo tag <canvas> es el que nos permite instanciar este nuevo elemento. Supongo que utilizamos un navegador que soporta HTML5 y este componente en concreto (Chrome o Firefox funcionan perfectamente). Como siempre se le da un id para poder manejarlo con JavaScript y unas características de tamaño y color de fondo, negro en nuestro caso.

Una vez tenemos el componente lo podemos tocar con JavaScript. Podemos incluirlo en el tag <script> de la página o meterlo en un fichero y hacer un include desde el HTML.

En primer lugar hay que tomar la referencia del objeto, algo muy sencillo en JavaScript con HTML5 usando el id asignado a la etiqueta canvas:

var canvas = document.getElementById('entorno_canvas');
var context = canvas.getContext('2d');

Hay que tener en cuenta que en el objeto canvas las medidas funcionan con unidades en píxeles. Para pintar los puntos utilizaremos el siguiente algoritmo:

  1. Situamos el “cursor” del canvas en un punto aleatorio dentro de las dimensiones del canvas (2 coordenadas, x e y).
  2. Ordenamos hacer una línea desde ese pixel al pixel aledaño para que la longitud sea uno.
  3. Volvemos al punto 1 para elegir otro punto.
Estas operaciones básicas quedan reflejadas en la función “pintapunto”:
x = Math.random() * max_x;
y = Math.random() * max_y;
context.moveTo(x,y);
context.lineTo(x+1,y);
context.stroke();
Para dar un efecto mucho más atractivo se ha incluido un retardo en el pintado de cada pixel, de ahí que el código sea un poco peculiar por la forma que tiene de operar la función setTimeOut. Se tiene en cuenta que las coordenadas no salgan de los valores máximo (800*600 que son max_x,max_y) y que se repita durante 10.000 iteraciones.
context.strokeStyle = '#FFF';

var max_x = 800;
var max_y = 600;
var x= 0;
var y = 0;
var contador = 0;
var ejecuciones = 10000;
var delay = 0.1;
var sto;

bucle();

function bucle()
{
//console.log("Contador:" + contador);
if (contador<ejecuciones)
{
contador++;
sto=setTimeout(pintaPunto,delay);
}
else
{
alert("Fin");
}
}

function pintaPunto()
{
x = Math.random() * max_x;
y = Math.random() * max_y;
context.moveTo(x,y);
context.lineTo(x+1,y);
context.stroke();
bucle();
}

El ejemplo se puede ver funcionando en esta dirección http://jsfiddle.net/4lberto/CfK5R/5/


Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s