Cuando configuramos el valor miter para el parámetro lineJoin, podemos configurar un límite de tamaño para la punta que formará el ángulo de los segmentos de la línea con miterLimit.
En el Manual de Canvas del HTML 5 estamos viendo varias de las maneras de configurar las líneas que se dibujan a partir de los caminos. En esta ocasión vamos a mostrar una propiedad llamada miterLimit que está muy ligada a la propiedad lineJoin.
En el artículo anterior vimos que la propiedad lineJoin tiene tres valores posibles. Ahora vamos a mostrar cómo podemos configurar aun más uno de los estados posibles de lineJoin: "miter".
Cuando ponemos en lineJoin en valor "miter" se crea un vértice puntiagudo que es más puntiagudo cuanto menor sea el ángulo de los segmentos de línea que se están uniendo, de tal modo que el tamaño de la punta, desde el punto donde se unen los segmentos del camino (del vértice) hacia afuera, crece exponencialmente cuanto mayor sea el ángulo.
Pues bien, con la propiedad miterLimit, que estamos explicando en este artículo, podemos regular el máximo tamaño que pueda llegar a tener la punta que se genera al unir dos segmentos de un camino. Ese tamaño que podemos configurar con miterLimit está medido en píxeles.
Para modificar el tamaño máximo de la punta basta con asignar cualquier valor numérico a miterLimit. En el caso que la punta sobrepase el valor que se le haya asignado en la propiedad miterLimit, se creará un bisel y se eliminará la punta por completo. En la práctica sería como si se hubiera configurado el valor "bevel" a la propiedad lineJoin.
Ejemplo de trabajo con miterLimit
Quizás sea un poco más difícil de explicar con palabras la propiedad miterLimit que entenderla a través de un ejemplo. Así que hemos realizado un script dinámico de dibujo en canvas donde se pueden configurar diversos valores para miterLimit y ver cómo afectan al resultado.
En este ejemplo tenemos un dibujo de un par de segmentos de un camino, que se juntan en un ángulo. Con el paso del tiempo el camino va alterándose para que el ángulo de las dos líneas sea menor. Como consecuencia de ello, la punta que une ambas líneas se va haciendo más y más puntiaguda. Llegará un momento en que el tamaño de la punta se hará tan grande que veremos como desaparece y el dibujo del ángulo se realizará con un bisel en lugar de una punta.
Para ver cuál es la distancia de la punta con respecto al vértice del camino, hemos colocado además un píxel pintado de otro color, que se sitúa en el punto exacto donde se juntan los dos segmentos del camino.
Además, hemos puesto un campo de texto donde se puede escribir cualquier valor que queremos que tome la propiedad miterLimit, para ver la diferencia de efectos producidos con unos y otros valores. Nosotros podemos escoger los valores que deseemos y ver los resultados. Para que el valor nuevo que se escriba se ponga en funcionamiento hay que pulsar el botón "Actualizar valor y reiniciar".
Podemos ver el ejemplo en una página aparte.
El código de este ejemplo lo podemos ver a continuación. En este caso interesa más entender la propiedad miterLimit más que el código en si, que no tiene nada en especial que no hayamos visto en ejemplos anteriores, salvo la propiedad miterLimit.
<!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 y miterLimit</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(){
actualizarValorReiniciar();
dibujaCaminoCambiaAngulo();
}
var altura_para_vertices = 1;
var valor_miteLimit = 10;
function actualizarValorReiniciar(){
altura_para_vertices = 1;
valor_miteLimit = parseInt(document.formulario.valormiterlimit.value);
}
function dibujaCaminoCambiaAngulo(){
var ctx = cargaContextoCanvas('micanvas');
if(ctx){
//cambio el valor de miterLimit
ctx.miterLimit = valor_miteLimit;
//limpio el canvas
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
//cambio color
ctx.strokeStyle = "#00c";
//defino la unión miter
ctx.lineJoin = "miter";
//anchura de la linea
ctx.lineWidth = 10;
//Dibujo dos líneas en angulo que va cambiando...
ctx.beginPath();
ctx.moveTo(20,380);
ctx.lineTo(40,380-altura_para_vertices);
ctx.lineTo(60,380);
ctx.stroke();
//pinto el punto donde estoy haciendo el angulo
ctx.fillStyle = "#0f0";
ctx.fillRect(39, 379-altura_para_vertices, 2, 2)
//actualizo la altura del vértice y llamo a la función con un retardo
altura_para_vertices += 2;
setTimeout("dibujaCaminoCambiaAngulo()",100);
}
}
</script>
</head>
<body>
<h1>Junturas o uniones de líneas en el canvas y miterLimit</h1>
<div style="width: 200px; float: left;">
<canvas id="micanvas" width="150" height="400">
Tu navegador no soporta canvas.
</canvas>
</div>
<div style="margin: 100px 0 0 200px;">
<form name="formulario">
Valor de miterLimit: <input type="text" size=3 value="10" name="valormiterlimit"> * recomiendo poner valor entre 1 y 15
<br>
<button type="button" onclick="actualizarValorReiniciar()">Actualizar valor y reiniciar</button>
</form>
</div>
</body>
</html>Dejamos de nuevo el enlace para ver el ejemplo en marcha.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...