คุณสมบัติ miterLimit

คุณสมบัติ miterLimit ควบคุมความแหลม ของการเชื่อมต่อระหว่างเส้นสองเส้นในกรณีที่ คุณสมบัติ lineJoin ถูกกำหนดให้เป็นค่า miter ควบคุมอย่างไร: หากความยาวของมุมมากกว่าตัวเลข ที่กำหนดใน miterLimit การเชื่อมต่อของเส้น จะทำงานราวกับว่า lineJoin ถูกกำหนดให้เป็นค่า bevel

ค่าเริ่มต้นของ miterLimit คือ 10 ไม่สามารถกำหนดค่านี้ให้ต่ำกว่า 1 ได้

ไวยากรณ์

javascriptcontext.lineJoin = 'miter' หรือ 'round' หรือ 'bevel';

ตัวอย่าง

ตอนนี้คุณสมบัติ lineJoin ถูกตั้งค่า เป็น miter แต่ยังไม่มีข้อจำกัดใดๆ มุมจึงยังแหลม:

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

Результат:

ตัวอย่าง

ตอนนี้ให้ตั้งค่าข้อจำกัดด้วย 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();

Результат:

ดูเพิ่มเติม