Caminos en canvas: ejemplo 3

  • Por
Cómo dibujar un camino en canvas de HTML 5 con diversas variantes, cerrado y sin cerrar, y con o sin relleno de color.

Quizás nos estemos poniendo un poco repetitivos con los caminos en Canvas, pero es que el tema es suficientemente importante como para publicar varios artículos. Como los propios lectores de DesarrolloWeb.com dicen, nunca está de más poner varios ejemplos que ayuden un poco más a asimilar los conocimientos brindados en los manuales.

En artículos anteriores ya explicamos cómo hacer caminos en canvas del HTML 5 esta ocasión vamos a dedicarnos a dibujar el mismo camino, que es un simple hexágono, pero con distintas variantes, para que las personas puedan ver las diferencias entre cerrar o no los caminos, así como rellenarlos de color.

En el presente artículo veremos las siguientes variantes de un camino con la forma de hexágono regular:

  1. Camino relleno de color y con el cierre de camino no explícito.
  2. Camino relleno de otro color y con el cierre de camino explícito por medio de closePath().
  3. Camino sin relleno de color, sólo la línea, y sin cierre de camino.
  4. Camino sin relleno de color, sólo la línea de la silueta y con cierre de camino explícito.

Realmente es un mismo ejercicio con varias variantes que esperamos pueda darnos alguna pista adicional sobre el dibujo en el elemento canvas del HTML 5. Podemos ver una imagen con los cuatro ejemplos de caminos que haremos a continuación:

1.- Camino relleno sin cierre explícito

Este primer ejemplo de dibujo en un canvas creará un camino con forma de rectángulo que tendrá un relleno de color. En este caso el el camino no está cerrado, pero veremos que da un poco igual en este caso.

Para rellenar de color un camino utilizamos la el método fill() del contexto del canvas, que antes de rellenar de color hace un cierre automático del camino. De esta manera, aunque no se haya completado el camino hasta cerrarlo, al invocar ctx.fill() esta función lo cerrará por nosotros.

//Hexagono relleno de color, cierre de camino automático con fill
var ctx = cargaContextoCanvas('canvas1');
if(ctx){
   ctx.beginPath();
   ctx.moveTo(50,15);
   ctx.lineTo(112,15);
   ctx.lineTo(143,69);
   ctx.lineTo(112,123);
   ctx.lineTo(50,123);
   ctx.lineTo(19,69);
   ctx.fill();
}

2.- Camino relleno con cierre explícito

En esta segunda variante del camino del hexágono tenemos un camino que sí hemos cerrado explícitamente con el método closePath(). Sin embargo, como fill() ya se encargaba de cerrar el camino por nosotros automáticamente, no existe diferencia entre ese camino y el anterior. Es decir, para el caso de caminos con color de relleno, es indiferente si el camino está o no cerrado, pues se cerrará automáticamente para poder rellenarse de color.

No obstante, para adornar un poco más el ejemplo, hemos optado por cambiar el color de relleno del hexágono, por medio de la propiedad fillStyle del objeto contexto del canvas.

//Hexagono rellenado, cierre de camino explícito con closePath
var ctx = cargaContextoCanvas('canvas2');
if(ctx){
   ctx.fillStyle = '#990000';
   ctx.beginPath();
   ctx.moveTo(50,15);
   ctx.lineTo(112,15);
   ctx.lineTo(143,69);
   ctx.lineTo(112,123);
   ctx.lineTo(50,123);
   ctx.lineTo(19,69);
   ctx.closePath();
   ctx.fill();
}

3.- Camino sin relleno y sin cierre

Ahora retomemos los caminos realizados sólo con una línea, sin rellenar de color, que ya vimos en el artículo anterior. Vendrá bien para ver las diferencias entre los caminos que tienen el color de relleno.

Como veremos, el camino es exactamente igual que los anteriores, con la diferencia que para dibujar sólo la línea del contorno del camino se utiliza el método stroke() del objeto contexto de canvas, en lugar de usar fill() que hace los caminos con relleno de color.

Además, podremos observar como al usar el método stroke() no se cierra automáticamente el camino como ocurría con fill(), sino que se queda abierto.

//Hexagono sólo línea, sin cierre de camino
var ctx = cargaContextoCanvas('canvas3');
if(ctx){
   ctx.beginPath();
   ctx.moveTo(50,15);
   ctx.lineTo(112,15);
   ctx.lineTo(143,69);
   ctx.lineTo(112,123);
   ctx.lineTo(50,123);
   ctx.lineTo(19,69);
   ctx.stroke();
}

4.- Camino sin relleno y con cierre

Para acabar con estos ejemplos de dibujo de hexágonos en un canvas vamos a mostrar cómo realizar un camino sólo con la línea del borde, como el anterior, pero con el cierre de camino que se consigue con closePath().

El camino es el mismo, pero antes de llamar a stroke() para dibujar la línea, hacemos un closePath() para cerrar el camino. Para añadir algún interés adicional al camino, hemos utilizado un color distinto para la línea del contorno, que se consigue en esta ocasión con la propiedad strokeStyle del objeto contexto del canvas.

//Hexagono sólo línea, con cierre de camino closePath()
var ctx = cargaContextoCanvas('canvas4');
if(ctx){
   ctx.strokeStyle = '#990000';
   ctx.beginPath();
   ctx.moveTo(50,15);
   ctx.lineTo(112,15);
   ctx.lineTo(143,69);
   ctx.lineTo(112,123);
   ctx.lineTo(50,123);
   ctx.lineTo(19,69);
   ctx.closePath();
   ctx.stroke();
}

Hasta aquí llega esta práctica de caminos en Canvas del HTML 5, con distintas variantes a partir de los mismos puntos del camino.

Si lo deseas, puedes ver una página donde se muestran los cuatro ejemplos de caminos vistos en este artículo.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

carlos morrison

28/3/2010
canvas
Como actionscriptero me parece un horror esto del canvas, es excelente tu tutorial, pero si esto es la facilidad de usuario de este canvas 5, seguramente permanecera en un nicho como el javascript, universal, pero poco comercial, en cambio flash, con la complejidad q se logra con movie clips y variables seguira teniendo las aplicaciones mas complejas y animadas, aunque claro habre q ver el tutorial de estos objetos ya animandose o con graficos importados

gracias

midesweb

06/9/2010
Javascript en un nicho ¿?
Hola!

No estoy de acuerdo para nada contigo en relación a que Javascript se ha quedado en un nicho, olvidado o nada parecido. De hecho, a estas alturas de la denominada web 2.0, podemos ver que todas las aplicaciones web más populares y de más éxito utilizan intensivamente Javascript. Sin embargo, te habrás fijado que casi ninguna utiliza Flash.

Para lo poco que se utilizaba Flash en los sitios web de éxito de la actualidad (embeber vídeo casi es lo único), poco a poco se va abandonando y sustituyendo esos métodos por características del HTML 5, como lo es el Canvas.

Estoy de acuerdo que aun se tiene que trabajar un poco para que el uso de canvas esté al alcance de cualquier persona, para hacer cosas llamativas sin prácticamente esfuerzo, pero ya existen diversos frameworks que facilitan bastante la labor y que en el futuro serán usados intensivamente, como hoy pueden serlo los frameworks Javascript como jQuery.

Hachetemelecinco

06/1/2011
Pintando con el teclado
Estoy intentando repintar según pulso las teclas, en principio está cambiando la posición y yo le paso contexto.lineTo(posx, posy) y las variables posx y posy, tienen un valor diferente, pero no se pinta sobre el canvas. Alguna idea de por qué no?

Gracias