JavaScript ile Canvas Üzerinde Daireler Çizme

Bir sonraki yöntem arc, merkezi belirli bir noktada olan bir yay çizer. Şu parametreleri alır: x, y, yarıçap r, başlangıç açısı startAngle, bitiş açısı endAngle, saat yönünde veya saat yönünün tersine çizim direction.

direction parametresi şu değerleri alır: true saat yönünde çizim yaptırır, false saat yönünün tersine çizim yaptırır (varsayılan).

Bu arada, arc yöntemindeki açılar radyan cinsinden ölçülür, derece cinsinden değil. Dereceleri radyana çevirmek için şu işlevi kullanabilirsiniz:

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

Bir Daire Çizelim

html<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();

Результат:

Bir Dairenin Yarısını Çizelim

html<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();

Результат:

Bir Daire Dilimi Çizelim

html<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(); // konturu dolduralım

Результат:

Pratik Görevler