คุณสมบัติ miterLimit
คุณสมบัติ miterLimit ควบคุมความแหลม
ของการเชื่อมต่อระหว่างเส้นสองเส้นในกรณีที่
คุณสมบัติ lineJoin
ถูกกำหนดให้เป็นค่า miter ควบคุมอย่างไร:
หากความยาวของมุมมากกว่าตัวเลข
ที่กำหนดใน miterLimit การเชื่อมต่อของเส้น
จะทำงานราวกับว่า lineJoin ถูกกำหนดให้เป็นค่า
bevel
ค่าเริ่มต้นของ miterLimit คือ 10
ไม่สามารถกำหนดค่านี้ให้ต่ำกว่า 1 ได้
ไวยากรณ์
context.lineJoin = 'miter' หรือ 'round' หรือ 'bevel';
ตัวอย่าง
ตอนนี้คุณสมบัติ lineJoin ถูกตั้งค่า
เป็น miter แต่ยังไม่มีข้อจำกัดใดๆ
มุมจึงยังแหลม:
<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();
:
ตัวอย่าง
ตอนนี้ให้ตั้งค่าข้อจำกัดด้วย
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();
:
ดูเพิ่มเติม
-
คุณสมบัติ
lineCap,
ซึ่งกำหนดลักษณะของปลายเส้น
