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 পদ্ধতি,
যা একটি আয়তক্ষেত্র আঁকে