วิธีการ arc

วิธีการ arc วาดส่วนโค้งโดยมีจุดศูนย์กลางที่ กำหนด และรัศมีที่กำหนด ส่วนโค้งนี้จะปรากฏให้เห็น ก็ต่อเมื่อใช้วิธีการ stroke หรือ fill ในกรณีแรกจะได้เส้นขอบ ส่วนกรณีที่สอง - จะได้รูปทรงที่เติมสี

พารามิเตอร์สุดท้ายซึ่งเป็นตัวเลือก ใช้ควบคุม ทิศทางการวาด มันรับค่า true หรือ false ค่า true วาดส่วนโค้งตามเข็มนาฬิกา ส่วนค่า false - ทวนเข็มนาฬิกา (ค่าเริ่มต้น)

สามารถกำหนดมุมเริ่มต้นและมุมสิ้นสุดได้เมื่อ วาด มุมเหล่านี้วัดในหน่วย เรเดียน ไม่ใช่หน่วยองศา ในการแปลงองศาเป็นเรเดียน คุณสามารถใช้ฟังก์ชันต่อไปนี้:

function getRadians(degrees) {
	return (Math.PI / 180) * degrees;
}

ไวยากรณ์

context.arc(x, y, radius, startAngle, endAngle, [counterclockwise = false]);

ตัวอย่าง

มาวาดเส้นรอบวงกัน:

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(360));
ctx.stroke();

function getRadians(degrees) {
	return (Math.PI / 180) * degrees;
}

ตัวอย่าง

มาวาดครึ่งเส้นรอบวงกัน:

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.stroke();

function getRadians(degrees) {
	return (Math.PI / 180) * degrees;
}

ตัวอย่าง

มาวาดครึ่งวงกลมกัน (เติมสี เส้นขอบด้วย fill):

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.fill();

function getRadians(degrees) {
	return (Math.PI / 180) * degrees;
}

ดูเพิ่มเติม

วิธีการ rect,
ซึ่งวาดรูปสี่เหลี่ยมผืนผ้า