Ejemplo
Dibujar líneas con la longitud máxima de inglete de 5:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth=10;
ctx.lineJoin="miter";
ctx.miterLimit=5;
ctx.moveTo(20,20);
ctx.lineTo(50,27);
ctx.lineTo(20,34);
ctx.stroke();
Inténtalo tú mismo " Soporte del navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Propiedad | |||||
---|---|---|---|---|---|
miterLimit | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definición y Uso
Los conjuntos de propiedades miterLimit o devuelve la longitud máxima de inglete.
La longitud de inglete es la distancia entre la esquina interior y la esquina exterior en la que dos líneas se encuentran.
Tip: La propiedad miterLimit sólo funciona si el lineJoin atributo es "miter" .
La longitud de inglete se hace más grande que el ángulo de la esquina se hace más pequeño.
Para evitar que la longitud de inglete de ser demasiado larga, podemos utilizar la propiedad miterLimit.
Si la longitud de inglete supera el valor miterLimit, la esquina se mostrará como tipo lineJoin "bevel" (Fig 3) :
Valor por defecto: | 10 |
---|---|
la sintaxis de JavaScript: | context .miterLimit= number ; |
Valores de propiedad
Valor | Descripción | Juegalo |
---|---|---|
number | Un número positivo que especifica la longitud máxima de inglete. Si la longitud de inglete actual supera el miterLimit, la esquina se mostrará como lineJoin "bevel" | Juegalo " |
<Objeto Canvas