Formas de lineas: ancho y extremos

Una linea puede ser ancha, estrecha, de colores, con acabados redondeados, uniones... Existen varias propiedades aplicables a cualquier linea que sea trazada por un lápiz. En estos ejemplos irás viendo cuales son.

En el primer ejemplo tienes el grosor y los acabados. El grosor es la propiedad lineWidth, un valor numérico que indica el grosor de la linea en pixels. Puedes consultarlo para usarlo o puedes asignarle un valor, como todas las propiedades.

El acabado de una linea recta puede se redondeada o plano. La diferencia se ve mejor usando lineas gruesas como en el ejemplo. Esta propiedad se denomina lineCap y los valores posibles son: butt, round, square.

Más que explicar como es cada una lo mejor es verlas en funcionamiento. En el ejemplo tienes los tres casos

<canvas id="mipapel" width="400" height="500"></canvas>

<script>

miLienzo = document.getElementById("mipapel"); 

   lapiz = miLienzo.getContext("2d");

   lapiz.beginPath();

   lapiz.lineWidth = 20;

   lapiz.lineCap = "butt"

   lapiz.moveTo(10,10);

   lapiz.lineTo(100,10);

   lapiz.stroke();

   lapiz.beginPath();

   lapiz.lineCap = "square"

   lapiz.moveTo(10,40);

   lapiz.lineTo(100,40);

   lapiz.stroke();

   lapiz.beginPath();

   lapiz.lineCap = "round";

   lapiz.moveTo(10,70);

   lapiz.lineTo(100,70);

   lapiz.stroke();

   //esto es para el texto explicativo

   lapiz.font = "18px Arial";

   lapiz.textBaseline= "middle";

   lapiz.fillText("butt", 120, 10);

   lapiz.fillText("square", 120, 40);

   lapiz.fillText("round", 120, 70);

</script>

Prueba este código

Como ves: definimos cada linea con su lineCap y dibujamos. Es necesario usar beginPath() para reiniciar el trazado, si no se superponen.

Las formas de los acabados y las uniones de lineas son importantes al dibujar figuras libres, a mano alzada.

Uniones de lineas

En el apartado anterior has visto como controlar el extremo de una linea, en este vas a ver como se pueden unir cuando se encuentrasn. La propiedad es lineJoin y permite tres valores: bevel, round, mitter. En el caso del mitter tienes una propiedad más la longitud de la unión, mitterLimit, si la unión es más ancha se convierte en biselada (bevel). No tiene demasiada utilidad.

<canvas id="mipapel" width="400" height="500"></canvas>

<script>

miLienzo = document.getElementById("mipapel"); 

   lapiz = miLienzo.getContext("2d");

   lapiz.beginPath();

   lapiz.lineWidth = 10;

   lapiz.lineJoin= "bevel"; //biselado

   lapiz.moveTo(10,10);

   lapiz.lineTo(100,20);

   lapiz.lineTo(10,40);

   lapiz.stroke();

   lapiz.beginPath();

   lapiz.lineWidth = 10;

   lapiz.lineJoin= "round"; //redondeado

   lapiz.moveTo(10,50);

   lapiz.lineTo(100, 60);

   lapiz.lineTo(10, 80);

   lapiz.stroke();	

   lapiz.beginPath();

   lapiz.lineWidth = 10;

   lapiz.lineJoin= "miter";

   lapiz.miterLimit = 3; 

   //cambia miterLimit para ver su efecto

   lapiz.moveTo(10,100);

   lapiz.lineTo(100,120);

   lapiz.lineTo(10, 140);

   lapiz.stroke();

</script>

Prueba este código