विधि 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 विधि,
जो एक आयत बनाती है