Eğriler
• Yay çizebilmek için arc fonksiyonu kullanırız.
• Yayın merkezini,yarıçapını,başlama açısını,bitiş açışını ve son olarak da hangi yönde(saat yönü ve tersi) yayın çizileceğini parametre olarak alır.
• Aşağıda örnek kodu verip sonra kodu açıklayalım.
<canvas id=“canvasim” width=“200” height=“200”></canvas> <script>
var canvas=document.getElementyId(‘canvasim’);var baglam=canvas.getContext(‘2d’);
baglam.beginPath(); baglam.arc(100,100,75,0,1.2*Math.PI,false); baglam.lineWidth=10;
baglam.strokeStyle=‘#000’;
baglam.stroke(); </script>
- Çizgi örneğinde olduğu gibi önce canvas nesnesini vebağlam nesnesini aldık.
- beginPath ile yeni bir şekle başladık.
- Sonra ise arc(x,y,yarıçap,başlama açısı,bitiş açısı,yön)fonksiyonunu çağırdık.
- Şimdi sırası ile bu parametrelerin ne olduğunu inceleyelim.
- x: Yayın merkezinin x koordinatıdır.Birimi pikseldir.
- y: Yayın merkezinin y koordinatıdır.Birimi pikseldir.
- Yarıçap: Yayın yarıçap değeridir.Birimi pikseldir.
- başlama açısı:Yayın hangi açı değerinden başlayacağınıbelirtir.
- bitiş açısı:Yayın hangi açı değerinde biteceğinibelirtir.Radyan cinsindedir.
- yön:Yayın yönünü belirler.Eğer true ise saatyönünün tersinde false ise saat yönünde yayı çizer.
- Başlama ve bitiş açılarının radyan cinsinden olduğunu yazdık.
- Radyanda 360 derece 2 PI’ye denk gelir.
- Aşağıdaki şekilde temel olarak açıların hangi radyan değerine denk geldiğine görebiliriz.
<canvas id=“canvasim” width=“200” height=“200”></canvas> <script>
var canvas=document.getElementyId(‘canvasim’);var baglam=canvas.getContext(‘2d’);
baglam.beginPath(); baglam.arc(100,100,75,5*Math.PI/6,3*Math.PI/2,false); baglam.lineWidth=10;
baglam.strokeStyle=‘#000’;
baglam.stroke(); </script>
