miterLimit Özelliği

miterLimit özelliği, lineJoin özelliği miter değerine ayarlandığında iki çizginin birleşiminin sivriliğini düzenler. Nasıl düzenler: eğer köşenin uzunluğu, miterLimit içinde belirtilen sayıdan daha büyük olursa, çizgi birleşimi lineJoin özelliğinin bevel değerine ayarlanmış gibi davranır.

Varsayılan olarak miterLimit değeri 10'dur. 1'den daha düşük bir değer ayarlanamaz.

Sözdizimi

javascriptbağlam.lineJoin = 'miter' veya 'round' veya 'bevel';

Örnek

Şu anda lineJoin özelliği miter değerine ayarlı, ancak henüz herhangi bir kısıtlama olmadığı için köşe sivri:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.lineWidth = 10;
ctx.moveTo(50, 140);
ctx.lineTo(100, 30);
ctx.lineTo(150, 140);
ctx.stroke();

Результат:

Örnek

Şimdi ise miterLimit ile bir sınırlama belirleyelim:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.lineWidth = 10;
ctx.miterLimit = 1;
ctx.moveTo(50, 140);
ctx.lineTo(100, 30);
ctx.lineTo(150, 140);
ctx.stroke();

Результат:

Ayrıca Bakınız