Thuộc tính miterLimit

Thuộc tính miterLimit điều chỉnh độ nhọn của điểm nối hai đường thẳng trong trường hợp thuộc tính lineJoin được đặt thành giá trị miter. Cách điều chỉnh: nếu độ dài góc lớn hơn số được đặt trong miterLimit, thì điểm nối các đường sẽ hoạt động như thể lineJoin được đặt thành giá trị bevel.

Mặc định miterLimit có giá trị 10. Không thể đặt giá trị của nó nhỏ hơn 1.

Cú pháp

ngữ cảnh.lineJoin = 'miter' hoặc 'round' hoặc 'bevel';

Ví dụ

Hiện tại thuộc tính lineJoin được đặt thành giá trị miter, nhưng chưa có giới hạn nào, góc rất nhọn:

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

Ví dụ

Bây giờ hãy đặt giới hạn bằng cách sử dụng 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();

Xem thêm

thuộc tính lineCap,
dùng để đặt kiểu phần cuối của đường thẳng