Properti miterLimit
Properti miterLimit mengatur ketajaman
penyambungan dua garis dalam kasus ketika
properti lineJoin
diatur ke nilai miter. Cara kerjanya:
jika panjang sudut ternyata lebih besar dari angka,
yang ditetapkan dalam miterLimit, maka penyambungan garis
berperilaku seolah-olah lineJoin diatur ke nilai
bevel.
Secara default miterLimit memiliki nilai 10.
Kurang dari 1 nilainya tidak dapat diatur.
Sintaks
konteks.lineJoin = 'miter' atau 'round' atau 'bevel';
Contoh
Saat ini properti lineJoin diatur
ke nilai miter, tetapi belum ada
pembatasan yang diterapkan, sudutnya tajam:
<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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();
:
Contoh
Dan sekarang mari kita atur batasannya menggunakan
miterLimit:
<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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();
:
Lihat juga
-
properti
lineCap,
yang mengatur tampilan ujung garis
