DesarrolloWeb.com > Manuales > Manual de Canvas del HTML 5

Ejemplo 2 de dibujo de caminos en canvas

09 de febrero de 2010

Valoración del artículo:

Enviar un comentario

Ver comentarios del artículo (2)

Segundo ejemplo sobre los caminos en el elemento canvas, donde veremos las funciones closePath() y stroke().

Por Miguel Angel Alvarez

Seguir a midesweb

El elemento canvas es un lienzo donde podemos dibujar directamente con funciones Javascript, que tiene ya aplicaciones infinitas en el desarrollo de webs. Estamos explicando acerca de este elemento en el Manual de Canvas del HTML 5 y en el presente artículo vamos a seguir hablando del dibujo caminos, viendo dos nuevas funciones del API de Canvas. Conviene no obstante señalar que el tema sobre caminos en canvas lo empezamos a explicar en Caminos en Canvas del HTML 5.

En el presente artículo veremos dos nuevas funciones útiles en la creación de caminos, que son closePath(), para cerrar un camino y stroke(), para dibujar el camino realizado mediante una línea. Las dos funciones, como cualquier otra función de dibujo en el lienzo de canvas, son métodos del objeto contexto del canvas, que se debe obtener a partir del elemento canvas con las correspondientes funciones de Javascript, tal como vimos anteriormente en este manual. Veremos estas nuevas funciones para dibujo de caminos con un ejemplo, pero antes podemos explicarlas detalladamente.

Función closePath()

Sirve para cerrar un camino, volviendo a su punto inicial de dibujo. Recordemos que el camino tiene un punto inicial en el que nos situamos para comenzar el dibujo, con moveTo(). Luego vamos dibujando segmentos en el camino por medio de líneas que nos llevan a otros puntos del lienzo. Pues closePath() sería como dibujar una línea recta desde el punto donde se haya quedado el camino al punto inicial donde empezamos a construirlo. El método closePath() no recibe ningún parámetro.

Función stroke()

Con el método stroke() podemos dibujar una línea por todo el recorrido del camino que hayamos creado por medio de sus distintos segmentos. Es similar al método fill(), explicado en el artículo anterior, con la diferencia que fill() rellenaba de color y stroke() tan solo dibuja la silueta. Además, en el caso de fill() se necesitaba tener el camino cerrado, por lo que se cerraba automáticamente si no lo habíamos hecho y stroke() realmente puede estar discontinuada, puesto que sólo es una línea lo que se dibuja y no un área.

Ejemplo de camino con closePath() y stroke()

A continuación vamos a realizar otro ejemplo de dibujo con el API de canvas y utilizando funciones para la realización de caminos. Por complicarlo un poco, vamos a realizar el camino con un bucle, en el que en cada iteración dibujaremos un segmento del camino. El resultado que vamos a obtener es una especie de perfil de una escalera.

ctx.beginPath();
ctx.moveTo(1,1);
for (i=1;i<100;i+=5){
   if((i%2)!=0){
      ctx.lineTo(i+5,i);
   }else{
      ctx.lineTo(i,i+5);
   }
}
ctx.lineTo(1,i);
ctx.closePath();
ctx.stroke();

Nota:Primero cabe advertir de nuevo que para ejecutar ese código necesitamos una variable que hemos llamado "ctx" que contiene el contexto del canvas, que es sobre el que invocaremos los distintos métodos para dibujar en el canvas.

En el script comenzamos el camino con beginPath(), luego con moveTo(1,1) nos situamos en el punto donde deseamos comenzar el dibujo. A continuación realizamos un bucle for para dibujar diversas líneas en diversas coordenadas.

Acabamos haciendo una última línea con lineTo() y después un closePath() para que se dibuje una línea final hasta el punto de inicio del camino, que cerrará la silueta realizada. Con stroke() hacemos que se dibuje una línea pasando por todos los segmentos que completan el camino dibujado.

Este ejemplo podemos verlo en una página aparte.

Ejemplo de línea discontinua

Si habemos observado el ejemplo anterior en marcha habremos visto que en realidad hay dos ejemplos de canvas. El segundo es igual que el primero, o casi igual, con la única diferencia que el camino no está cerrado y está formado por una línea discontinua. Esto se puede hacer perfectamente con stroke(), pues para pintar líneas no es necesario que cierren completamente el camino.

El dibujo anterior lo hemos realizado con un código como el que sigue:

ctx.beginPath();
ctx.moveTo(1,1);
for (i=1;i<100;i+=5){
   if((i%2)!=0){
      ctx.lineTo(i+5,i);
   }else{
      ctx.moveTo(i,i+5);
   }
}
ctx.stroke();

Ejemplo completo de dibujo de líneas con caminos en canvas

Para todos los interesados, colocamos a continuación el código completo de este ejemplo.

<html>
<head>
   <title>Canvas Caminos con stroke</title>
<script>
//Recibe un identificador del elemento canvas y carga el canvas
//Devueve el contexto del canvas o FALSE si no ha podido conseguise
function cargaContextoCanvas(idCanvas){
   var elemento = document.getElementById(idCanvas);
   if(elemento && elemento.getContext){
      var contexto = elemento.getContext('2d');
      if(contexto){
         return contexto;
      }
   }
   return false;
}

window.onload = function(){
   //Recibimos el elemento canvas
   var ctx = cargaContextoCanvas('micanvas');
   if(ctx){
      ctx.beginPath();
      ctx.moveTo(1,1);
      for (i=1;i<100;i+=5){
         if((i%2)!=0){
            ctx.lineTo(i+5,i);
         }else{
            ctx.lineTo(i,i+5);
         }
      }
      ctx.lineTo(1,i);
      ctx.closePath();
      ctx.stroke();
   }


   //otro ejemplo basado en el mismo código
   var ctx = cargaContextoCanvas('micanvas2');
   if(ctx){
      ctx.beginPath();
      ctx.moveTo(1,1);
      for (i=1;i<100;i+=5){
         if((i%2)!=0){
            ctx.lineTo(i+5,i);
         }else{
            ctx.moveTo(i,i+5);
         }
      }
      ctx.stroke();
   }
}

</script>

</head>

<body>

<canvas id="micanvas" width="150" height="150">
Recicla tu browser, POR FAVOR!!
</canvas>

<br>
<br>

<canvas id="micanvas2" width="150" height="150">
POR FAVOR, Recicla tu navegador!!
</canvas>

</body>
</html>