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:

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

Sözdizimi

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

Örnek

Bir çember çizelim:

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

javascriptlet 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:

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

javascriptlet 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):

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

javascriptlet 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