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.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...