Crea tu web, tutor html, css

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