Introducción a Canvas


Canvas es uno de los elementos más atractivos y populares de HTML5, nos permite desplegar gráficos sin muchos problemas aunque si requerimos matemáticas para lograrlo. La ventaja es que cada vez hay más ejemplos por la red que puedes reutilizar.

Para crear el elemento solo necesitamos llamar a la etiqueta canvas e indicar el ancho y alto que contendrá nuestras gráficas, por ejemplo:

<canvas height="XX" width="XX">
</canvas>

Podemos dibujar lineas, arcos, texto, figuras complejas, imágenes, etc; a continuación explicaré más a detalle algunas propiedades tomando como base la siguiente imagen.



Para este ejercicio lo primero que necesitas es crear la estructura básica de una página Web (html, head…) y posteriormente crearemos una función Javascript que denominaremos loadCanvas() la cual mandaremos a llamar en el body justo cuando se empieza a cargar la página, es decir:

<body onload="loadCanvas()">
...
</body>

Ahora si es momento de crear nuestros elementos, por lo que en la función definiremos que <div> (canvas) contrendrá nuestras gráficas y que tipo de canvas queremos diseñar, para este ejemplo será en 2D; por lo que el código te quedaría así:


Los primeros elementos que vamos a realizar y de los cuales explicaré un poco más sus características son unos cuadrados/rectángulos y agregaremos un color a cada uno de ellos, para crear el rectángulo se define así: fillRect(float x, float y, float w, float h); por lo que para indicarle que será en 2D solo mandas a llamar a graph y el código resultante es:

graph.fillRect(10, 20, 155, 70);


Paraplicar el color lo indicamos como rgba(“X”,”X”, “X”, “Alpha”), por lo que para nuestro ejemplo es:

graph.fillStyle = "rgba(200, 200, 0, 1)";

Hasta el momento debes tener dibujado un rectángulo y un cuadrado en colores diferentes, el código es el siguiente:

El siguiente paso es crear un círculo por lo que para iniciar a usar las líneas llamamos a beginPath(), cuando tu figura esté completamente creada solo la terminas con closePath().

Usaremos el arco y con una sencilla operación matemática (Math.PI * 2) obtendremos un círculo, después le aplicaremos color con una ligera transparencia (fillStyle); tu código debe verse así:

El siguiente elemento que veremos es como crear texto y algunas propiedades, la llamada que debes hacer para eso es fillText(“TEXTO”, X, Y), y para indicarle el tamaño y tipo de letra con X.font = “…”

Para el caso del color con strokeStyle = “rgba(X, X, X, alpha)”

El primer mensaje que desplegaremos es Hola :), y quedaría como lo siguiente:


Y el segundo mensaje es mi cuenta de twitter, con el mismo tipo de letra, 40px e itálica.

El código completo es el siguiente:


Si gustas puedes descargarlo de aquí.

Listo!!!, es un post muy sencillo para iniciarte en el manejo de canvas en HTML5, todo depende de tu creatividad y como unas los elementos, en otro post te mostraré como desplazar objetos para hacer una animación muy simple 🙂

Anuncios

Acerca de silvercorp

Blog personal de Ye§i creado el 18/Ag/06 enfocado al diseño gráfico, tecnología y programación.

Publicado el junio 29, 2012 en Básicos, HTML5. Añade a favoritos el enlace permanente. 2 comentarios.

  1. Hola Yesi! sin duda una muy buena introducción a Canvas, gracias por compartirla 😀 lo único malo es que el código está en imagen T_T ¿por qué? ¿Por Qué? ¿POR QUÉ? 😛 por suerte también lo codeaste en un gist jejeje, cuidate y saludos! 🙂

    • Hooola Wiwa.

      Suuper gracias :), sii es solo un post introductorio, al menos con eso les entra la espinita para seguirle :). Jajaja sii es q es más facil :P, pero ahí esta el codigo, q lo disfrutes.

      Saludos 😀

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

A %d blogueros les gusta esto: