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

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>

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

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.

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>