Trabajando con Canvas

Rompiendo un poco con el hilo de los tutoriales de introducción a FirefoxOS, voy a comenzar a hablar un poco de una herramienta tan potente como Canvas, una de las grandes novedades de HTML5. Todos hemos visto ejemplos de lo que es capaz de hacer navegando por webs, y muchos nos hemos preguntado cómo podemos reproducir (o crear) algunos efectos.

Al final del post os voy a mostrar varios ejemplos para que os hagáis una idea de lo que se puede hacer (con muchas horas de trabajo y esfuerzo).*

Otra de las grandes utilidades que tiene Canvas es la de la realización de juegos para el navegador, usando el contexto de Canvas para renderizar la escena y los elementos y aplicando lógica por javascript. Podemos encontrarnos con varios motores de juegos que hacen uso de esta tecnología.**

Y ahora que posiblemente tengo vuestra atención, comencemos entonces describiendo un poco por encima qué es Canvas y viendo cómo funciona.

Según la Wikipedia:
«Canvas (lienzo en inglés) es un elemento HTML incorporado en HTML5 que permite la generación de gráficos dinámicamente por medio del scripting. Permite generar gráficos estáticos y animaciones. […]
El objeto canvas puede ser accedido a través de JavaScript, permitiendo generar gráficos 2D, juegos, animaciones y composición de imágenes. Existe otra etiqueta SVG que cumple con funciones similares.»

Bien, pero vamos a meternos a teclear un poco de código, pero antes de nada, tened presente que para este ejemplo, si queréis copiar el código tal cual, usaré directorios para los scripts javascript que colocaré en la carpeta js, al igual que las imágenes y css que las pondré en css e images según correspondan.

Tendremos entonces un fichero index.html en la raíz del proyecto con lo que se mostrará en el navegador:

[cc]



Primer ejemplo Canvas


Tu navegador no soporta Canvas.



[/cc]

Como podéis ver, sólo contiene la estructura básica de una página HTML5 con un Canvas. Este Canvas tiene un ID con el que podremos referenciarlo más tarde desde javascript y poder dibujar en él, además de tener los atributos width y height. Es importante remarcar que estos atributos no son el alto y ancho que tendrá el Canvas, si no los puntos que contendrá como coordenadas y que podremos usar más tarde para posicionarnos dentro de él. El tamaño se lo daremos a través de CSS.
También habréis observado que en el interior de Canvas muestro el mensaje de «Tu navegador no soporta Canvas.», el mensaje que pongamos aquí sólo se mostrará en los navegadores que no sean compatibles con Canvas.

El fichero style.css simplemente centra el Canvas y le da tamaño, además de un borde para poder localizarlo fácilmente dentro de la página. Adicionalmente, podemos ponerle un color de fondo al body para diferenciarlo más fácilmente.

[cc]
body {
background-color: #CCC;
text-align: center;
}

#myCanvas {
border: 1px solid #000000;
width: 1200px;
height: 750px;
background-color: #FFF;
}
[/cc]

Pasemos ahora al fichero main.js, que será el más importante en nuestros proyectos de Canvas.

[cc]
var canvas = document.getElementById(«myCanvas»);

var ctx = canvas.getContext(«2d»);

ctx.fillStyle = «#FF0000»;
ctx.fillRect(30,30,650,275);
[/cc]

Empezamos con algo sencillo, como dibujar un rectángulo con una de las funciones que tenemos a nuestra disposición de Canvas (a lo largo de este tutorial, utilizaremos varias para familiarizarnos con el concepto).

Captura de pantalla de 2013-11-27 19:20:50

Pero antes de continuar, tenemos que puntualizar con dos pequeños detalles que son clave para el buen funcionamiento de nuestros scripts.

El primer punto que hemos de tener presentes es la forma de posicionar las coordenadas en el lienzo de Canvas. La coordenada (0,0) se localiza en la esquina superior izquierda, siendo la X positiva mientras nos desplazamos a la derecha como estamos acostumbrados, pero al contrario trabajando con el eje Y, pues según va aumentando su valor, vamos posicionándonos más abajo en el lienzo, siendo la esquina inferior derecha en nuestro caso el punto (1000, 600).

El segundo punto importante es conocer la forma de trabajar de Canvas, ya que trabaja como una máquina de estados. Esto significa que primero se definen unas cualidades de los elementos que vayamos a dibujar (como color, transformaciones, etc), y luego se aplicarán a todos los elementos que dibujemos en la escena mientras no volvamos a cambiar el estado. Por ejemplo:

– Definimos color rojo de pintado.
– Dibujamos cuadrado (se dibujará de color rojo).
– Dibujamos triángulo (se dibujará de color rojo).
– Definimos color azul de pintado.
– Dibujamos círculo (se dibujará de color azul).
– Y así sucesivamente.

Teniendo en cuenta estos dos puntos, podemos analizar qué hace el código javascript anterior de main.js. Línea a línea, sería:

[cc]
// Creamos una variable a la que le asignamos una referencia al Canvas del HTML
// para poder trabajar con él.
var c = document.getElementById(«myCanvas»);

// Obtenemos un contexto sobre el que trabajar (puede ser 3D o 2D, en este caso,
// y por simplificar el proceso, sólo veremos 2D).
var ctx = c.getContext(«2d»);

// Especificamos como estado dibujar de color rojo.
ctx.fillStyle = «#FF0000»;

// Creamos un rectángulo en la posición (30,30) para el vértice superior izquierdo,
// y (650,275) para el vértice inferior derecho.
ctx.fillRect(30,30,650,275);
[/cc]

Con usos parecidos, tenemos las funciones strokeRect y clearRect que dibujarán sólo el contorno de un rectángulo o borrará en un área rectangular los elementos respectivamente.

Para dibujar formas más complejas, usaremos trazados (path). Añadimos las siguientes líneas al final de nuestro fichero main.js:

[cc]
ctx.fillStyle = «#00FF00»;

ctx.beginPath();
ctx.moveTo(90, 90);
ctx.lineTo(150, 150);
ctx.lineTo(40, 130);
ctx.fill();
[/cc]

Ahora veremos cómo se dibuja un triángulo verde sobre el cuadrado rojo. Línea a
línea, el código anterior explicado hace:

Captura de pantalla de 2013-11-27 19:21:01

[cc]
// Especificamos como estado dibujar de color rojo.
ctx.fillStyle = «#00FF00»;

// Indicamos que vamos a comenzar un trazado
ctx.beginPath();

// Nos movemos (sin dibujar nada aún) al punto (90,90) del canvas
ctx.moveTo(90, 90);

// Dibujamos una linea desde el punto que nos encontrábamos a la
// coordenada (150,150)
ctx.lineTo(150, 150);

// Dibujamos otra línea que va desde la coordenada (150,150) a la (40,130)
ctx.lineTo(40, 130);

// Rellenamos el área y cerramos el trazado
ctx.fill();
[/cc]

Sobre Canvas también podemos dibujar texto e imágenes, además de rellenar con gradientes en vez de colores planos. En el siguiente ejemplo, escribiremos el conocido «Hello world!» usando uno de estos gradientes.

Ponemos el siguiente código al final del fichero conservando todo lo anterior:

[cc]
ctx.font = «60px Arial»;

var gradient = ctx.createLinearGradient(0,0,canvas.width,0);
gradient.addColorStop(«0″,»red»);
gradient.addColorStop(«0.5″,»orange»);
gradient.addColorStop(«1.0″,»yellow»);

ctx.fillStyle = gradient;

ctx.fillText(«Hello World!»,200,400);
[/cc]

Captura de pantalla de 2013-11-27 19:28:56

Explicando un poco cómo funciona la creación de gradients:

[cc]
// Indicamos que la tipografía a usar será Verdana con 60 px de resolución
ctx.font = «60px Arial»;

// Creamos un objeto de tipo gradient usando como parámetros dos puntos,
// dónde comienza el gradiente y en qué punto acaba, en nuestro caso, desde
// el punto (0,0) al (1000,0)
var gradient = ctx.createLinearGradient(0,0,canvas.width,0);

// Añadimos un color con el que comenzará el gradiente, el rojo.
gradient.addColorStop(«0″,»red»);

// A mitad del gradiente, cambiará al color naranja
gradient.addColorStop(«0.5″,»orange»);

// Finalizará con el color amarillo
gradient.addColorStop(«1.0″,»yellow»);

// Indicamos que el color con el que rellenar a partir de ahora es el del
// gradiente que hemos creado
ctx.fillStyle = gradient;

// Dibujamos el texto Hello World! empezando desde el punto (200,400) del Canvas
ctx.fillText(«Hello World!»,200,400);
[/cc]

Para terminar con este pequeño tutorial de cómo empezar con Canvas, cargaremos una imagen en el lienzo. Descargamos una imagen a nuestro gusto y la guardamos en la carpeta img bajo el nombre de image.jpg.

Ponemos el siguiente código justo después de obtener el contexto 2d de Canvas sobre el que trabajar, y lo explicaré línea por línea.

[cc]
// Creamos un objeto de tipo imagen, realmente podríamos obtener una de
// la web y cargarla, pero de este modo, no ensuciamos la web con las imágenes.
var img = new Image();
// Indicamos que la imagen a usar será la que nos hemos descargado
img.src = ‘img/image.jpg’;

// Es importante ejecutar las acciones que queramos realizar tras cargar
// la imagen cuando esta ya lo haya hecho de forma correcta, por lo que añadimos el resto del código cuando
// ocurra su evento onload.
img.onload = function() {
// Dibujamos la imagen en el Canvas, pasando como parámetros el punto
// desde el que comenzará su esquina superior izquierda (0,0), como el
// ancho y altura que tendrá
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

// este código lo acabamos de ver, simplemente creará un gradiente para
// el texto que vamos a escribir, pero esta vez, realizaremos el gradiente
// de forma vertical, no horizontal como antes.
ctx.font = «120px Verdana-Bold»;

var gradient = ctx.createLinearGradient(0,400,0,430);
gradient.addColorStop(«0″,»blue»);
gradient.addColorStop(«0.5″,»violet»);
gradient.addColorStop(«1.0″,»magenta»);

ctx.fillStyle = gradient;

ctx.fillText(«gradients»,370,440);
}
[/cc]

Captura de pantalla de 2013-11-27 20:12:09

Ya hemos visto como empezar a dibujar elementos sencillos sobre un Canvas, claro está, para llegar a realizar aplicaciones como las que podéis ver aquí abajo quedan bastantes horas de trabajo, pero por algo tenemos que empezar.

*
http://muro.deviantart.com/
http://js-fireworks.appspot.com/
http://craftymind.com/factory/html5video/CanvasVideo.html
http://radikalfx.com/files/anibg/
http://www.kevs3d.co.uk/dev/html5logo/
http://demo.tutorialzine.com/2010/08/animated-404-not-found-page-css-jquery/404.html

**
http://impactjs.com/
http://www.93i.de/products/software/gamvas
http://cocos2d-javascript.org/

WordPress › Error

Ha habido un error crítico en esta web.

Aprende más sobre el diagnóstico de WordPress.