Ev / DERSLER / Web Tasarım Dersler / HTML / HTML5 Canvas Etiketi ( 16.Ders Canvas İle Çember ve Oval Cizimler )

HTML5 Canvas Etiketi ( 16.Ders Canvas İle Çember ve Oval Cizimler )

<canvas> Etiketimizle Çember ve Oval Çizimler İçin arc Metodumuzu Kullanıyoruz Bu Metotları JavaScript Derslerimizde Tekrar Ederek ve Çeşitli Metotları Öğrenerek Daha Güzel Tasarımlar Oluşturabiliriz.

arc(x,y,r,start,stop) metodunda tanımlamamız bu şekilde olacak

Örnek Çalışma

İlk Olarak Canvas İle Bir Çalışma Alanı oluşturalım

<canvas id="resimalani3" width="500" height="500" style="border:1px solid #000000"></canvas>

Oluşturduğumuz canvas alanına id=”” ile mutlaka tanımlayıcı bir isim oluşturmamız gerekiyor JavaScrip ile kodlarımızı bu alanda göstermek için bu isimi kullanacağız.

width=”” height=”” style=”” ile Klasik Boyutlandırmaları  Oluşturduk.

</canvas> alanımızı kapattık ve bundan sonra JavaScrip İle yazacağımız kodlarımızı hemen altında devam edeceğiz.

<script>
      var c = document.getElementById("resimalani3");
      var ctx = c.getContext("2d");	
      ctx.beginPath();
      ctx.arc(150,350,100,0,2*Math.PI);
      ctx.stroke();
</script>

canvas etiketimizin altında oluşturduğumuz script etiketlerinin içinde şu tanımlamaları yaptık.

var c = document.getElementById(“resimalani3”);  Komutumuz İle id si resimalani3 olan canvas alanında çalışma yapacağımızı belirttik.

var ctx = c.getContext(“2d”); Komutumuz İle Alanda Bir Nesne Oluşturacağımızı Belirttik.

ctx.beginPath(); Metodu ile bir çizim yapılacağını bildiriliyoruz. İşlemler Bittiğinde İse stroke veya fill yöntemi İle Çizimi Bitirdiğimizi Belirtiyoruz.

ctx.arc(150,350,100,0,2*Math.PI); arc metodumuzun içinde belirteceğimiz parametrelerle başlangıç bölgelerini ve boyutlandırmalarını yapacağız.

İlk İki Komutumuzda başlama noktalarını belirtiyoruz 150 soldan 350 yukarıdan boşluklarla başlayacağımızı belirttik. 100 parametremizlede çemberimizin boyutunu tanımladık, 0 komutumuzla açıklık kalmadan tam bir daire olmasını tanımladık 10 gibi bir değer belirtseydik tamamen iki ucu birleşmeden yarım kalırdı çember oluşturabilmek için 0 komutu kullanıyoruz. 2*Math.PI komutumuzla da yarı çapının pi sayısını alıp 2 ile çarpıyoruz. ve çemberimizi oluşturan parametreleri tanımlamış oluyoruz.

ctx.stroke(); Komutumuz ile bunun bir başlangıç ve bitiş kordinatlarının olacağı bir çizği olacağını tanımladık.

hakkında BilgeBank

İlgini Cekebilir

Canvas İle Çalışma Alanı Oluşturma

HTML5 Canvas Etiketi ( 14.Ders Canvas İle Çalışma Alanı Oluşturma)

<canvas> Etiketimiz web sayfalarında çeşitli grafikler oluşturmamıza ve geometrik çalışmalar yapabilmemiz için div gibi çalışma …

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

%d blogcu bunu beğendi: