მეთოდი arc

მეთოდი arc ხაზავს რკალს მოცემული ცენტრით და რადიუსით. ეს რკალი გახდება ხილული მხოლოდ მაშინ, თუ გამოვიყენებთ მეთოდებს stroke ან fill. პირველ შემთხვევაში იქნება კონტური, ხოლო მეორეში - ფიგურა.

ბოლო არასავალდებულო პარამეტრი არეგულირებს ხატვის მიმართულებას. ის იღებს მნიშვნელობას true ან false. მნიშვნელობა true ხაზავს რკალს საათის ისრის მიმართულებით, ხოლო მნიშვნელობა false - საათის ისრის საწინააღმდეგოდ (ნაგულისხმევად).

შესაძლებელია დაწესდეს საწყისი და საბოლოო კუთხეები ხატვისას. ეს კუთხეები იზომება რადიანებში, არა გრადუსებში. გრადუსების რადიანებში გადასაყვანად შეგიძლიათ გამოიყენოთ შემდეგი ფუნქცია:

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

სინტაქსი

კონტექსტი.arc(x, y, რადიუსი, საწყისი კუთხე, საბოლოო კუთხე, [მიმართულება = 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,
რომელიც ხაზავს მართკუთხედს