Introducción a HTML5 Canvas

El elemento <canvas> es uno de los avances más importantes que podría tener HTML5. <canvas> nos permite dibujar gráficos a vuelo en una página web, lo que nos permite ahorrar muchos recursos de renderizado en nuestro servidor. Canvas resulta ser la alternativa ideal para los que no somos amigos de flash ;-S.

En este pequeño post veremos algunos usos y métodos del elemento <canvas>.

Para poder desarrollar este post con tranquilidad es necesario tener conocimentos mínimos en: HTML (No necesariamente en HTML5), CSS y JavaScript.

El elemento <canvas> es sólo un contenedor de graficos, se debe usar un script (en JavaScript) para realmente crear los graficos.
Creandor un Grafico con Canvas.

Canvas define una región HTML para realizar los gráficos. Esta región de gráficos debe tener un tamaño que se asigna con los atributos: width y height.

<canvas id="myCanvas" width="200" height="100"></canvas>

Además canvas cuenta con algunos métodos para realizar trazos, cajas, círculos, edición de imágenes y más, accesibles con JavaScript.

Dibujar con JavaScript.

Como ya sabemos el elemento <canvas> solamente es un contenedor de gráficos, y para poder dibujar los gráficos tenemos que hacerlo a través de JavaScript. Por ejemplo, realizamos un rectángulo de color naranja.

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4  <title>Rectangulo</title>
 5 </head>
 6 <body>
 7  <canvas id="myCanvas" width="120" height="100" style="border:1px solid #C3C3C3;">
 8 Tu navegador no soporta el elemento canvas
 9  </canvas>
 10  <script type="text/javascript">
 11   var c = document.getElementById("myCanvas");
 12   var ctx= c.getContext("2d");
 13   ctx.fillStyle="#FA3";
 14   ctx.fillRect(0, 0, 120, 100);
 15  </script>
 16 </body>
 17 </html>

Si al abrir este ejemplo en tu navegador, se muestra un mensaje “Tu navegador no soporta el elemento canvas”, es que cuentas con un navegador antiguo, sin soporte para HTML5.

getContext(“2d”): Objeto built-in de HTML5 para el elemento <canvas>, para crear un contexto 2D. getContext(“2d”) Tiene métodos para dibujar líneas, círculos, cajas, etc.
fillStyle: Método que nos sirve para establecer el color de relleno.
fillRect: Método usado para dibujar un rectángulo al cual le indicamos la posición: ejes X, Y, y el tamaño: Width y Height. la posición 0,0 determina el ángulo superior izquierdo.

Por qué no realizamos otro ejemplo. Creemos la bandera de Dinamarca :-p.

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <title>CANVAS</title>
 5 </head>
 6 <body>
 7 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #C3C3C3;">
 8 Your browser does not support the canvas element.
 9 </canvas>
 10 <script type="text/javascript">
 11 var c = document.getElementById("myCanvas");
 12 var ctx= c.getContext("2d");
 13
 14 // Dibujo un rectángilo rojo.
 15 ctx.fillStyle="#CE1111";
 16 ctx.fillRect(0,0,200,100); // fillRect(x, y, width, height)
 17
 18 // Métodos de rutas.
 19 ctx.beginPath();
 20 ctx.lineWidth="17";
 21 ctx.strokeStyle="#FFF";
 22 // Linea Horizontal.
 23 ctx.moveTo(0, (100/2));
 24 ctx.lineTo(200, (100/2));
 25 // Linea vertical.
 26 ctx.moveTo((200/2.7), 0);
 27 ctx.lineTo((200/2.7), 100);
 28
 29 // Creamos las trazas.
 30 ctx.stroke();
 31 </script>
 32 </body>
 33 </html>

beginPath(): Comienza el proceso de dibujo de una línea poligonal o borra la trayectoria.
lineWidth: Indicamos el ancho en pixeles.
strokeStyle: El trazo de color del dibujo, el negro es por defecto.
moveTo(x,y): Mueve la trayectoria hacia el punto especificado, sin necesidad de crear una línea.
lineTo(x,y): Crea una línea entre la última posición de la trayectoria y la primera posición. Completando la trayectoria.

Con moveTo() y lineTo() realizamos la traza de la figura. Estos métodos nos aportan un puntero o cursor para dibujar. La diferencia radica en que moveTo() mueve el puntero sin dibujar y lineTo() dibuja la línea mientras se desplaza. Así: Empiezo poniendo el cursor en la parte central del eje Y, (0, 50) para moveTo() y que el cursor me trace una línea hasta la posición (200, 50) de lineTo(), para crear la línea horizontal. Luego creamos la trayectoria vertical con moveTo(74, 0) y lineTo(74, 100).

stroke(): Crea una traza/trayectoría descrita con los métodos de rutas especificados.

Ahora por qué no hacemos el logo de HTML5 ;-P.

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <title>CANVAS</title>
 5 </head>
 6 <body>
 7 <canvas id="myCanvas" width="200" height="200" style="border:1px solid #C3C3C3;">
 8 Your browser does not support the canvas element.
 9 </canvas>
 10 <script type="text/javascript">
 11 var c = document.getElementById("myCanvas");
 12 var ctx= c.getContext("2d");
 13
 14 // Dibujo un rectángulo.
 15 ctx.fillStyle="#EE5524";
 16 ctx.fillRect(0,0,200,200); // fillRect(x, y, width, height)
 17
 18 // Métodos de trayectorias.
 19 ctx.beginPath();
 20 ctx.lineWidth="25";
 21 ctx.strokeStyle="white";
 22 ctx.moveTo(152, 45);
 23 ctx.lineTo(55, 45);
 24 ctx.lineTo(60, 90)
 25 ctx.lineTo(140, 90);
 26 ctx.lineTo(135, 140);
 27 ctx.lineTo(95,150);
 28 ctx.lineTo(65,140);
 29 ctx.lineTo(60,115);
 30
 31 ctx.stroke();
 32
 33 </script>
 34 </body>
 35 </html>

Vacano no!… Listo, con esto podemos ver algo del potencial de HTML5 y su elemento <canvas>.

By: Jolth

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