Свойство miterLimit холста HTML

❮ Справочник по холсту HTML

Пример

Нарисуйте линии с максимальной длиной митры 5:

Ваш браузер не поддерживает 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();

Поддержка браузера

Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.

Property
miterLimit Yes 9.0 Yes Yes Yes

Определение и использование

Свойство miterLimit задает или возвращает максимальную длину митры.

Длина под углом — это расстояние между внутренним углом и внешним углом, где сходятся две линии.

Mitre Limit рисунок 1

Совет. Свойство miterLimit работает, только если атрибут lineJoin имеет значение «miter».

Длина скоса увеличивается по мере уменьшения угла угла.

Чтобы длина митры не была слишком большой, мы можем использовать свойство miterLimit.

Если длина скоса превышает значение miterLimit, угол будет отображаться как lineJoin type "bevel" (рис. 3):

Mitre Limit рисунок 2
Значение по умолчанию: 10
Синтаксис JavaScript: контекст .miterLimit= число ;

Значения свойств

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"

❮ Справочник по холсту HTML