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:
function getRadians(degrees) {
return (Math.PI / 180) * degrees;
}
Bir Daire Çizelim
<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();
:
Bir Dairenin Yarısını Çizelim
<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();
:
Bir Daire Dilimi Çizelim
<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(); // konturu dolduralım
:
