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

javascriptngữ 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:

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

Результат:

Ví dụ

Bây giờ hãy đặt giới hạn bằng cách sử dụng miterLimit:

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

Результат:

Xem thêm