Uniones entre segmentos de líneas en canvas con lineJoin

  • Por
  • HTML
Cuando una línea consta de varios segmentos, las junturas o uniones entre los distintos segmentos se pueden configurar de diferentes maneras con la propiedad lineJoin.

A lo largo del Manual de Canvas venimos explicando diversos modos de realizar dibujos en caminos. Una de las posibilidades a la hora de dibujar caminos es marcar una línea sobre su recorrido y dicha línea tiene distintas configuraciones posibles. Ya empezamos a tratarlas cuando hablamos sobre grosores de la línea o cuando explicamos los distintos tipos de extremos que podemos definir.

En este artículo vamos a hablar de la configuración de las uniones en segmentos del camino, que se pueden realizar de tres maneras distintas. Además veremos un ejemplo que muestre cómo son cada una de estas diferentes configuraciones.

Propiedad lineJoin, uniones entre líneas

La propiedad lineJoin pertenece al contexto del canvas y sirve para definir la forma con la que se unirán las líneas que hacen de segmentos de un camino. Es decir, cuando tenemos un camino que está formado por diferentes líneas, éstas se podrán unir con tres tipos de configuraciones distintas.

  • miter
  • round
  • bevel

En la siguiente imagen se pueden ver los distintos tipos de uniones disponibles:

El valor "miter" de la propiedad lineJoin, representado en la imagen con color rojo, es el que se da como predeterminado e indica que las uniones tienen que formar esquinas perfectas, en el ángulo que lleve el camino.

El valor "round" hace que las uniones entre segmentos del camino se realicen con esquinas redondeadas. Se puede ver en color verde en la imagen anterior.

El valor de lineJoin "bevel" hace que las uniones no sean angulosas, pero tampoco redondeadas. Podemos verlo en la imagen anterior en la forma de color azul. Como se puede apreciar, hace que los ángulos producidos por dos líneas segmentos de camino tengan un biselado.

Ejemplo de dibujo con configuraciones de línea con lineJoin

Ahora podemos ver un ejemplo de dibujo en el elemento canvas que nos demuestre cómo los distintos valores de lineJoin se pueden utilizar para producir formas distintas. En concreto veremos el código que necesitaríamos para producir un dibujo como el que aparece en la imagen anterior de este artículo.

var ctx = cargaContextoCanvas('micanvas');
if(ctx){
   //defino un array con los distintos valores de lineJoin
   var valores_lineJoin = ["miter", "round", "bevel"];
   //defino un array con colores
   var colores = ["#900", "#090", "#009"]
   //configuro el grosor de línea
   ctx.lineWidth = 20;
   //bucle para hacer tres rectángulos con distintas configuraciones
   for (i=0; i<3; i++){
      //cargo la configuración de lineJoin
      ctx.lineJoin = valores_lineJoin[i];
      //cargo la configuración de color
      ctx.strokeStyle = colores[i];
      //dibujo un rectángulo
      ctx.strokeRect((i * 160) + 20, 20, 120, 80);
   }
}

Como se puede ver, hemos realizado las tres formas con un bucle for, desde 0 hasta 2, lo que nos permite recorrer un array con distintos valores de lineJoin, que vamos asignando para cada uno de los rectángulos.

Se puede ver el código completo del ejemplo a continuación.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html>
<head>
<title>Junturas o uniones de líneas en el canvas</title>
<script language="javascript">
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(){
   var ctx = cargaContextoCanvas('micanvas');
   if(ctx){
      //defino un array con los distintos valores de lineJoin
      var valores_lineJoin = ["miter", "round", "bevel"];
      //defino un array con colores
      var colores = ["#900", "#090", "#009"]
      //configuro el grosor de línea
      ctx.lineWidth = 20;
      //bucle para hacer tres rectángulos con distintas configuraciones
      for (i=0; i<3; i++){
         //cargo la configuración de lineJoin
         ctx.lineJoin = valores_lineJoin[i];
         //cargo la configuración de color
         ctx.strokeStyle = colores[i];
         //dibujo un rectángulo
         ctx.strokeRect((i * 160) + 20, 20, 120, 80);
      }
   }
}

</script>
</head>
<body>
<h1>Junturas o uniones de líneas en el canvas</h1>

<canvas id="micanvas" width="500" height="200">
Tu navegador no soporta canvas.
</canvas>

</body>
</html>

Para acabar, podemos ver el ejemplo en marcha en una página aparte.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

carlos

21/11/2010
agradecimiento
hola, que tal.
agradezco la informacion suministrada en este manual ya que esta bastante completa y sencilla de entender.
ojala hubieran mas personas como ustedes, que les gusta compartir sus conocimientos.

Antonio

04/12/2010
Agradecimientos
Hola, deseo agradecer a Miguel Angel Alvarez y a los administradores de la web el trabajo que se han tomado en hacer este manual. Me ha gustado mucho y es muy didáctico.

Saludos
Antonio