Propriedade miterLimit da tela HTML

❮ Referência de tela HTML

Exemplo

Desenhe linhas com o comprimento máximo de meia-esquadria de 5:

Seu navegador não suporta a tag HTML5canvastag.

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();

Suporte ao navegador

Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.

Property
miterLimit Yes 9.0 Yes Yes Yes

Definição e uso

A propriedade mitreLimit define ou retorna o comprimento máximo da mitra.

O comprimento da mitra é a distância entre o canto interno e o canto externo onde duas linhas se encontram.

Limite de esquadria figura 1

Dica: A propriedade mitreLimit funciona somente se o atributo lineJoin for "miter".

O comprimento da mitra cresce à medida que o ângulo do canto fica menor.

Para evitar que o comprimento da mitra seja muito longo, podemos usar a propriedade mitreLimit.

Se o comprimento da mitra exceder o valor mitreLimit, o canto será exibido como lineJoin tipo "bevel" (Fig 3):

Limite de esquadria figura 2
Valor padrão: 10
Sintaxe JavaScript: contexto .miterLimit= número ;

Valores de propriedade

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"

❮ Referência de tela HTML