NovaMonoFix
Errores PHP
X
Usuario
Password
0 FPS

Tutorial HTML5 Canvas2D parte 1

31 de Octubre del 2011 por Josep Antoni Bover4053 visitas, 2 comentarios, 7 votos con una media de 4.43 sobre 5.
Categorías : Canvas 2D, HTML, JavaScript, Programación.
La web está en segundo plano, animación en pausa.
Cargando animación...
Tutorial HTML5 Canvas2D parte 1

El objeto canvas de HTML5 es un objeto que nos permite pintar gráficos dinámicamente en una porción de la pagina web utilizando JavaScript.

Este objeto puede ser utilizado tanto para pintar gráficos en dos dimensiones como en tres dimensiones.

En este primer tutorial empezaremos por ver cómo hay que crear este objeto y como utilizar un par de funciones básicas para pintar gráficos dentro del él.

Para ello crearemos una animación simple que representara el universo moviéndose de izquierda a derecha.

Lo primero que tenemos que hacer es declarar una serie de variables globales, y una estructura que utilizaremos para contener los datos de cada estrella :

Variables y estructuras
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Variables globales
var TotalEstrellas = 200;
var Espacio = Array();
var Temporizador = 0;
var Canvas;
var Context;
// Atributos para cada estrella del espacio
function Estructura_Espacio(x, y, Velocidad, Color) {
this.x = x;
this.y = y;
this.Velocidad = Velocidad;
this.Color = 'rgb(' + Color + ', ' + Color + ', ' + Color + ')';
}

La variable TotalEstrellas determina el total de estrellas que se mostraran en la animación, la variable Espacio será un array con los datos de todas las estrellas, la variable Temporizador será la encargada de contener la ID del temporizador encargado de realizar la llamada a la función de la animación, la variable Canvas será la encargada de guardar los datos de la etiqueta canvas, y la variable Context será el objeto que se utilizara para pintar los gráficos en dos dimensiones.

Además de las variables podemos ver la función Estructura_Espacio que no es más que la estructura básica con los datos de una estrella dentro del espacio (X, Y, Velocidad, y Color).

Ahora nos toca ver como iniciamos el objeto canvas para pintar gráficos en dos dimensiones, y como creamos el universo :

Inicio de la animación
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// Función que inicializa todas las variables requeridas para la animación
function IniciarAnimacion() {
if (Temporizador !== 0) return;
Canvas = document.getElementById('CanvasEspacio');
if (Canvas.getContext) {
Context = Canvas.getContext('2d');
CrearEspacio();
EncenderTemporizador();
}
else {
alert('Tu navegador no soporta el objeto canvas!');
}
}
// Función que crea el array con los datos para cada estrella
function CrearEspacio() {
for (var i = 0; i < TotalEstrellas; i++) {
Espacio[i] = new Estructura_Espacio( Context.canvas.width * Math.random(), // X
Context.canvas.height * Math.random(), // Y
(5 * Math.random()) + 1, // Velocidad
200 + Math.round((5 * Math.random()) + 1) * 10 ); // Color
}
Temporizador = 0;
}

En primer lugar, en la línea 3 obtenemos el objeto DOM que hace referencia a la etiqueta canvas por su id. Luego en la línea 4 hacemos una comprobación para ver si existe la función getContext que en caso de salir falsa sabremos que el navegador no soporta el objeto canvas.

Una vez sabemos que podemos utilizar la función getContext en la línea 5 creamos el objeto para pintar los gráficos en dos dimensiones, en la línea 6 llamamos a la función CrearEspacio para rellenar el array Espacio y por ultimo en la línea 7 utilizamos la función EncenderTemporizador que inicia la animación.

En la función CrearEspacio básicamente utilizamos un bucle que recorre de 0 al total de estrellas y que crea sus valores aleatoriamente.

Ahora echemos un vistazo brevemente a las funciones encargadas de iniciar y terminar el temporizador de la animación :

Inicio y fin del temporizador
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Función que inicia el temporizador de la animación
function EncenderTemporizador() {
if (Canvas.getContext && Temporizador === 0) {
Temporizador = setInterval(PintarEspacio, 10);
}
}
// Función que detiene el temporizador de la animación
function PararTemporizador() {
if (Temporizador != 0) {
clearInterval(Temporizador);
Temporizador = 0;
}
}

La función EncenderTemporizador se asegura de que se pueda utilizar la función getContext, y de que el temporizador no se ha creado, para dar paso a su creación. Para crearlo utiliza la función setInterval que llama a la función PintarEspacio cada 10 milisegundos.

La función PararTemporizador se asegura de que el temporizador esta encendido, y de ser ese el caso llama a la función clearInterval para eliminar ese temporizador.

Ya solo nos queda echar un vistazo a la función PintarEspacio :

Función PintarEspacio
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Función que pinta el universo
function PintarEspacio() {
Context.fillStyle = 'rgb(0, 0, 0)';
Context.fillRect(0, 0, Context.canvas.width, Context.canvas.height);
for (i = 0; i < TotalEstrellas; i++) {
Espacio[i].x += Espacio[i].Velocidad;
// Se ha salido del recuadro
if (Espacio[i].x > Context.canvas.width) {
Espacio[i] = new Estructura_Espacio( 0,
Context.canvas.height * Math.random(),
(5 * Math.random()) + 1,
200 + Math.round((5 * Math.random()) + 1) * 10 );
}
Context.fillStyle = Espacio[i].Color;
Context.fillRect(Espacio[i].x, Espacio[i].y, 1, 1);
}
}

Lo primero que hace esta función en la línea 3, es asignar el color, para ello se asigna en el atributo fillStyle la cadena "rgb(0,0,0)" que se refiere al color negro expresado en rgb.

NOTA : Existen dos atributos para cambiar el color fillStyle y strokeStyle, el primero define el color del fondo, y el segundo el color del borde. Al utilizar fillRect solo pintamos un rectángulo con el color del fondo, si luego queremos pintarle el borde deberíamos utilizar strokeRect.

Inmediatamente en la línea 4 se utiliza la función fillRect especificando 0 en las coordenadas X, Y, y el ancho y altura del objeto canvas. Lo que pinta todo el fondo de color negro.

En la línea 5 empieza un bucle que recorre el array Espacio y que suma a la X de cada estrella su valor de Velocidad. Luego comprueba si la X se sale del canvas, y de ser ese el caso crea una nueva estrella aleatoria en esa posición.

Por último asigna el color para la estrella utilizando el atributo fillStyle, y pinta la estrella utilizando fillRect.

Lo único que nos falta es ver el código HTML que se ha utilizado para el canvas :

Código HTML
1
<canvas id="CanvasEspacio" width="990" height="100" style="background-color:#000"></canvas>

Con añadir la etiqueta HTML canvas con una id para poder localizarla vía JavaScript DOM es suficiente. Como recomendación el tamaño del objeto canvas es mejor especificarlo vía atributos, y no dentro del estilo css.

NOTA : Este tutorial lo he hecho con un día de experiencia utilizando el objeto canvas, por lo que no tiene que ser necesariamente de lo mas optimizado, pero para el caso creo que viene bien para dar los primeros pasos. Almenos funciona en explorer algunas veces xD...

Y esto es todo por hoy!, como siempre si queréis podéis ver o descargar una versión simplificada con el ejemplo de la animación.

Ver ejemplo Descargar ejemplo


[#3] devildrey33 31 Octubre del 2011 a las 19:13, votos 0 de 1.
[#1] A decir verdad he mirado mas de un ejemplo pero nunca me he puesto a trastear... Ya tenia pensado mirarme algún día el tema, pero es algo mas complejo, y al no tener experiencia en el campo del 3d me costara algo mas de tiempo... De todas formas conozco un tutorial en ingles que igual te interesa [url]http://learningwebgl.com/blog/?p=28[/url] es bastante completo y esta basado en el tutorial de OpenGL de NeHe [url]http://nehe.gamedev.net/tutorial/lessons_01__05/22004/[/url] Saludos.
[#1] barba 31 Octubre del 2011 a las 18:58, votos 2 de 2.
Interesante ejemplo de iniciación. Conozco el objeto canvas desde hace tiempo pero nunca he necesitado usarlo, me guardo la referencia para cuando llegue el momento. Por cierto, has usado WebGL (http://www.khronos.org/webgl/) alguna vez ? he leido que va muy bien, quizás podrias darle un ojo e ilustrarnos nueavamente con un post de ejemplo, a ver que tal :-)