HTML5 Canvas Etiketi ( 16.Ders Canvas İle Çember ve Oval Cizimler ) – BilgeBank
Anasayfa / DERSLER / Web Tasarım Dersleri / HTML - CSS Dersleri / 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

İlgili Makale

CSS3 Dersleri 4 box-shadow Kutuları Gölgelendirme

CSS3 ile birlikte gelen ve kutuya gölge verme için kullanılan box-shadow özelliği ve kullanımı ile ilgili bilgi vermeye çalışacağım. Hemen …

Bir cevap yazın

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

%d blogcu bunu beğendi:
%d blogcu bunu beğendi: