arc Metodu

arc metodu, belirtilen merkez noktasında ve yarıçapta bir yay çizer. Bu yay, yalnızca stroke veya fill metotları uygulandığında görünür hale gelir. İlk durumda kontur, ikinci durumda ise dolu bir şekil oluşur.

Son isteğe bağlı parametre, çizim yönünü ayarlar. true veya false değerini alır. true değeri saat yönünde bir yay çizer, false değeri ise saat yönünün tersine çizer (varsayılan).

Çizim sırasında başlangıç ve bitiş açıları belirtilebilir. Bu açılar radyan cinsinden ölçülür, derece cinsinden değil. Dereceleri radyana çevirmek için aşağıdaki işlevi kullanabilirsiniz:

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

Sözdizimi

bağlam.arc(x, y, yarıçap, başlangıç açısı, bitiş açısı, [yön = false]);

Örnek

Bir çember çizelim:

<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;
}

Örnek

Bir yarım çember çizelim:

<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;
}

Örnek

Bir yarım daire çizelim (konturu fill ile dolduralım):

<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;
}

Ayrıca Bakınız

rect metodu,
bir dikdörtgen çizer