Caminos en canvas: ejemplo 3

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.