Propiedad HTML canvas miterLimit
Ejemplo
Dibuje líneas con una 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();
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
| Property | |||||
|---|---|---|---|---|---|
| miterLimit | Yes | 9.0 | Yes | Yes | Yes |
Definición y uso
La propiedad miterLimit establece o devuelve la longitud máxima de inglete.
La longitud del inglete es la distancia entre la esquina interior y la esquina exterior donde se unen dos líneas.
Sugerencia: la propiedad miterLimit solo funciona si el atributo lineJoin es "miter".
La longitud del inglete crece a medida que el ángulo de la esquina se hace más pequeño.
Para evitar que la longitud del inglete sea demasiado larga, podemos usar la propiedad miterLimit.
Si la longitud del inglete supera el valor miterLimit, la esquina se mostrará como tipo de unión de línea "bisel" (Fig. 3):
| Valor por defecto: | 10 |
|---|---|
| Sintaxis de JavaScript: | contexto .miterLimit= numero ; |
Valores de propiedad
| Value | Description | Play it |
|---|---|---|
| number | A positive number that specifies the maximum miter length. If the current miter length exceeds the miterLimit, the corner will display as lineJoin "bevel" |
❮ Referencia de lienzo HTML