Otros ejemplos de dibujo de caminos en elementos Canvas

A lo largo del Manual del componente Canvas del HTML 5 hemos visto varios ejemplos de dibujo de caminos. Si hemos seguido los capítulos anteriores de este manual ya deberíamos haber cogido un poco de práctica al dibujar líneas que siguen un camino, relleno de color o sin relleno. Lo cierto es que ya podríamos pasar a algún otro tema más adelantado, pero tenemos todavía en el tintero un par de ejemplos con caminos que pueden ser interesantes para acabar de entender cómo se crean.

En el presente ejemplo estamos haciendo varios caminos en un mismo canvas y además, vamos a rellenar de colores distintos cada uno de los caminos, lo que nos vendrá bien para seguir practicando. La idea de este artículo es que nos podamos familiarizar un poco más con la práctica de abrir caminos, cerrarlos y volver a abrir otros caminos. Además, podemos ver que con un mismo camino también podemos pintar en dos partes distintas del lienzo, trasladando el puntero de dibujo pero sin pintar.

Primer ejemplo, pintar dos caminos distintos

Este primer ejemplo tendría el siguiente código:

var ctx = cargaContextoCanvas('micanvas');
if(ctx){
   //primer camino
   ctx.beginPath();
   ctx.moveTo(20,10);
   ctx.lineTo(32,20);
   ctx.lineTo(22,20);
   ctx.lineTo(22,35);
   ctx.lineTo(17,35);
   ctx.lineTo(17,20);
   ctx.lineTo(7,20);
   //ctx.closePath(); opcional antes de un fill()
   ctx.fill();
   
   //creo un segundo camino
   ctx.beginPath(); //probar a comentar esta línea para ver lo que pasa
   ctx.fillStyle = '#ff8800';
   ctx.moveTo(47,50);
   ctx.lineTo(67,70);
   ctx.lineTo(67,30);
   ctx.closePath();
   ctx.fill();
}

En ese código estamos realizando dos caminos distintos sobre un mismo canvas. El primer camino está separado en el código del segundo y los dos comienzan con un beginPath(). En cada camino hacemos un moveTo() para colocar el puntero de dibujo en las coordenadas deseadas.

Luego se hace el closePath() para cerrar el camino, completándolo con una línea recta desde el último punto hasta el punto desde donde comenzamos el caminio. Pero como se puede ver en ejemplo, la llamada al método closePath() es opcional, pues estos dos caminos se rellenan de color con fill() y este método requiere que el camino esté cerrado. Por eso, si el camino no se cerró explícitamente con closePath(), con la llamada a fill() se hace implícitamente.

Otra cosa interesante es el cambio de color que hacemos en el segundo camino con la propiedad fillStyle del objeto canvas, en la línea:

ctx.fillStyle = '#ff8800';

El primer ejemplo se puede ver en marcha en este enlace.

Segundo ejemplo, un camino que pinta en dos lugares distintos

El segundo ejemplo que nos queda por ver es muy parecido al primero, con la diferencia que ahora vamos a dibujar la silueta o contorno, en vez de rellenarlos de color. Además, en este segundo ejemplo sólo tenemos un camino en vez de dos que había antes. Esto es porque hacemos sólo un beginPath() y aunque cerremos el camino con closePath() y luego hagamos un moveTo() para trasladar el puntero de dibujo, en realidad sólo tenemos un camino.

Es por ello que, el cambio de color con la propiedad strokeStyle, aunque se haga en el medio del código, afecta a todo el trazado, pues es el mismo camino.

var ctx = cargaContextoCanvas('micanvas');
if(ctx){
   ctx.beginPath();
   ctx.moveTo(20,7);
   ctx.lineTo(32,20);
   ctx.lineTo(22,20);
   ctx.lineTo(22,35);
   ctx.lineTo(17,35);
   ctx.lineTo(17,20);
   ctx.lineTo(7,20);
   ctx.closePath();
   
   //cambio el color de la línea, el color cambia para todo el trazo
   ctx.strokeStyle = '#ff8800';
   
   //sigo en el mismo camino, pero muevo el puntero de dibujo
   ctx.moveTo(47,50);
   ctx.lineTo(67,70);
   ctx.lineTo(67,30);
   ctx.closePath();
   ctx.stroke();
}

El segundo ejemplo en marcha se puede ver también en una página aparte.

Hemos de admitir que estos dos ejemplos no significan un claro avance con respecto a lo que ya habíamos relatado en el manual, pero nunca está de más hacer ejemplos prácticos. Además, hay muchas cosas que merece la pena practicar para entender bien cómo se realizan. En el siguiente artículo explicaremos nuevas técnicas para hacer líneas curvas y no sólo líneas rectas como hasta ahora.