HTML5 Canvas Etiketi ( 18.Ders Canvas İle Metin Oluşturma )

Canvas Etiketimizle metin yazdırmak için 2 seçeneğe bakacağız biri dolgulu yazım biçimi FillText metodu diğeri içi boş strokeText metotlarıyla canvas alanımıza metin ekleyeceğiz.

[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/10/HTML5-Canvas-Etiketi-18.Ders-Canvas-İle-Metin-Oluşturma-.html” icon=”” target=”true”]Örnek Çalışma[/button]

İlk Olarak Canvas alanımızı belirliyoruz.

<canvas id="resimalani6" 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("resimalani6");
	var ctx = c.getContext("2d");
	ctx.font = "29px Arial";
	ctx.strokeText("<canvas>BilgeBank HTML5</canvas>",2,250);
</script>

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

var c = document.getElementById(“resimalani6”);  Komutumuz İle id si resimalani6 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.font = “29px Arial”; Komutumuz ile yazımızın 29px Arial yazı formatında olmasını Belirledik.

ctx.strokeText(“<canvas>BilgeBank HTML5</canvas>”,2,250); Komutumuz ile ilk değerde “<canvas>BilgeBank HTML5</canvas>” yazısının yazmasını 2 Soldan boşlukla başlamasını ve 250px yukarıdan boşlukla başlamasını belirledik.

strokeText Formatında yazımızın içi boş bir şekilde çıktı aldık içi dolgulu yazı yazdırmak isterseniz strokeText yerine FillText yazmanız yeterlidir.

HTML5 Canvas Etiketi ( 17.Ders Canvas İle Renklendirmeler)

<canvas> Etiketimizle Renklendirmeler Yapacağız Bunun İçin 2 Metot Kullanacağız biri Düz Renk Geçişleri Sağlayacağımız createLinearGradient diğeri oval geçiş sağlayabileceğimiz createRadialGradient metotlarımızla renklendirmeler yapacağız. Fazla Uzatmadan hemen örneğimize bakarak nasıl renk geçişleri sağlayacağımıza bakalım..

[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/10/HTML5-Canvas-Etiketi-17.Ders-Canvas-İle-Renklendirmeler.html” icon=”” target=”true”]Örnek Çalışma[/button]

Gradient Kullanımları

  1. createLinearGradient(x,y,x1,y1)
  2. createRadialGradient(x,y,r,x1,y1,r1)

İlk Olarak Canvas alanımızda düz geçişleri sağlayacağımız createLinearGradient metodumuzu kullanalım bunun için Canvas İle Bir Çalışma Alanı oluşturalım

<canvas id="resimalani4" 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("resimalani4");
	var ctx = c.getContext("2d");

	var grd = ctx.createLinearGradient(100,0,300,0);
	grd.addColorStop(0,"#F88C00");
	grd.addColorStop(1,"black");

	ctx.fillStyle = grd;
	ctx.fillRect(10,10,480,480);
</script>

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

var c = document.getElementById(“resimalani4”); Komutumuz İle id si resimalani4 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.
var grd = ctx.createLinearGradient(100,0,300,0); Komutumuzla renk geçiş komutlarını belirliyoruz sırasıyla şu şekilde değerler verdik

100 : soldan sağa turuncu rengimiz 100px e kadar renk değişmeden devam etsin  siyah renge 100px den sonra geçiş yapsın dedik.

0 : Komutumuz soldan sağa düz bir renk geçişi sağlanmasını sağladık buraya ekleyeceğiniz değer ile renk geçişinin kare içindeki değişimini farkedebilirsiniz burasıda y düzlemi içindeki başlangıç değerini belirler

300: Komutumuz ile siyah rengimizin başlangıcını belirledik ilk değerde verdiğimiz 100 ile 300 arasında renk tonlaması oluşturduk.

0: Komutumuzla 2. değerde verdiğimiz y düzleminin tersi yönünde başlangıç belirleyebilirsiniz başlatabilirsiniz

grd.addColorStop(0,”#F88C00″); Komutumuz ile 0 değerindeki yani ilk renk alanımıza #F88C00 renk kodumuzla turuncu tonlarında bir renk değeri belirledik

grd.addColorStop(1,”black”); Komutumuz ile 1 değerindeki ikinci renk alanımıza siyah renk olmasını tanımladık bu sayede renk geçişinin nasıl olduğunu daha iyi fark edebileceğiz.
ctx.fillStyle = grd;  Komutumuzla Çalışma Alanımızı Oluşturacağız.

ctx.fillRect(10,10,480,480); Komutumuz İle Alanımıza Boyutlandırmaları ve yerleşimini sağlayacağız

ilk değerimiz olan 10 ile soldan sağa x düzleminde 10px lik bir boşlukla başlayacak yine aynı şekilde 2 değerimizde 10 ile yukarıdan aşağıya y düzleminde 10px boşlukla başlayacak cizimimiz.

3 ve 4 değerlerimizde alanımızın kaplayacağı boyutu belirliyoruz 480,480 ile 480px genişliğinde ve yüksekliğinde bir kare oluşturuyoruz.

Renk Geçişlerimizi yukarıdaki ctx.createLinearGradient içinde belirliyoruz.

Örnek Kodlarda verdiğimiz değerlerde ufak değişiklikler yaparak hangi değerinm nerede işlem yaptığına bakabilirsiniz.

 

Ve İkinci canvas alanımızıda da createRadialGradient ile oval bir renk geçişi sağlayalım bunun için bir canvas alanı belirleyelim

<canvas id="resimalani5" 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("resimalani5");
	var ctx = c.getContext("2d");

	var grd = ctx.createRadialGradient(340,140,40,340,140,150);
	grd.addColorStop(0,"#F88C00");
	grd.addColorStop(1,"#44e9e5");

	ctx.fillStyle = grd;
	ctx.fillRect(10,10,480,480);
</script>

var c = document.getElementById(“resimalani5”); 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.

var grd = ctx.createRadialGradient(340,140,40,340,140,150); Komutumuz İle Asıl Değerlerimizi Burada Oluşturuyoruz.

createRadialGradient(x,y,r,x1,y1,r1) Değerimize bakarak

createRadialGradient metodumuzun içindeki ilk 3 parametre oluşturduğumuz turuncu alanımızı oluşturmamıza yarıyor 340px soldan sağa boşlukla başla 140px yukarıdan aşağıya boşlukla başla ve 40px çapında bir daire oluşturmasını istiyoruz.

Son 3 parametrede dış alanımızı belirliyor ve iç alanla aradaki renk geçişlerinin oluşmasını sağlıyor aynı alanda ve tam bir çember olması için 340px soldan sağa boşlukla başla 140px yukarıdan aşağıya boşlukla başla komutlarını belirtkten sonra 150px çapında bir daire oluşturarak renk katmanlarımızı oluşturuyoruz.

grd.addColorStop(0,”#F88C00″); Komutumuz İle İç alanda oluşturduğumuz turuncu rengi belirledik.

grd.addColorStop(1,”#44e9e5″); Komutumuz İle dış alanda oluşturduğumuz turkuaz rengi belirledik.

ctx.fillStyle = grd; Komutumuzla Çalışma Alanımızı Oluşturacağız.

ctx.fillRect(10,10,480,480); Komutumuz İle Alanımıza Boyutlandırmaları ve yerleşimini sağlayacağız

ilk değerimiz olan 10 ile soldan sağa x düzleminde 10px lik bir boşlukla başlayacak yine aynı şekilde 2 değerimizde 10 ile yukarıdan aşağıya y düzleminde 10px boşlukla başlayacak cizimimiz.

3 ve 4 değerlerimizde alanımızın kaplayacağı boyutu belirliyoruz 480,480 ile 480px genişliğinde ve yüksekliğinde bir kare oluşturuyoruz.

Renk Geçişlerimizi yukarıdaki ctx.createRadialGradient içinde belirliyoruz.

Çalışmalarda Değerleri Değiştirerek Nasıl Değişimler olduğuna bakarak mantığını iyice kavrayın umarım yararlı bir yazı olmuştur aklınıza takılan soruları yorum bölümünde sorabilirsiniz.

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

[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/10/HTML5-Canvas-Etiketi-16.Ders-Canvas-İle-Çember-ve-Oval-Cizimler-.html” icon=”” target=”true”]Örnek Çalışma[/button]

İ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.

HTML5 Canvas Etiketi ( 15.Ders Canvas Yol Belirleme )

<canvas> Etiketimiz İçinde Çizim Yollarını Belirlemek için Hemen Örneğimize Geçelim

[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/10/HTML5-Canvas-Etiketi-15.Ders-Canvas-Yol-Belirleme-.html” icon=”” target=”true”]Örnek Çalışma[/button]

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

<canvas id="resimalani2" 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("resimalani2");
   var ctx = c.getContext("2d");
   ctx.moveTo(10,20);
   ctx.lineTo(400,450);
   ctx.stroke();
</script>

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

var c = document.getElementById(“resimalani2”);  Komutumuz İle id si resimalani2 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.moveTo(10,20); Komutumuz İle Çizimimizin Başlangıç Yolunu belirledik.

10 : Soldan Sağa 10px.  ile başlamasını tanımladık.

20 : Yukarıdan Aşağıya 20px. ile başlamasını tanımladık.

ctx.lineTo(400,450); Komutumuz İle Çizimimizin Bitiş Noktasını Tanımladık

400 : Soldan Sağa Doğru 400px. de bitimini tanımladık.

450 : Yukarıdan Aşağıya 450px. de bitimini tanımladık.

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


	

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 alanını belirleyen tutucudur . Canvas etiketimizi resim yapmak için kullandığımız boş bir sayfa olarak düşünebilirsiniz bunun üzerine resimi yapabilmek için bir ressama ihtiyacımız var buda javascript veya buna benzer kodlama dilleri olabilir. Javascrip Bildiğinizi varsayarak örneğimizi hemen yapalım.

[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/10/HTML5-Canvas-Etiketi-14.Ders-Canvas-İle-Çalışma-Alanı-Oluşturma.html” icon=”” target=”true”]Örnek Çalışma[/button]

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

<canvas id="resimalani1" 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("resimalani1");
	var ctx=c.getContext("2d");
	ctx.fillStyle="#999";
        ctx.fillRect(10,20,200,300);
</script>

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

var c=document.getElementById(“resimalani1”);  id olarak resimalani1 ismini verdiğimiz canvas alanımızı Script Komutumuzun içinde belirttik biz artık bu alanda çalışıyor dedik.

var ctx=c.getContext(“2d”); Komutumuz ile Alanda Bir Nesne Oluşturacağımızı Bildirdik Bu ve bunun Gibi Birçok Metodu JavaScript Derslerimizde Öğreneceğiz.

ctx.fillStyle=”#999″; Komutumuz İle Bu Nesnemize Bir renk Oluşturduk.

ctx.fillRect(10,20,200,300); Komutumuz İle Gerekli Boyutlandırmaları ve Kordinatlarını belirledik.

ctx.fillRect Metodunun içinde vermiş olduğumuz parametreler sırasıyla şu şekildir.

İlk İki Parametremiz oluşturduğumuz Dikdörtgenimizin canvas Alanımızın Kordinatıdır x ve y düzlemlerini belirtir.

Son İki Parametremiz Dikdörtgenimizin Boyutlarıdır.

10 : Oluşturduğumuz Dikdörtgen Soldan Sağa Doğru 10px bir Boşlukla Başlasın.

20 : Oluşturduğumuz Dikdörtgen Yukarıdan Aşağıya Doğru 20px bir Boşlukla Başlasın.

200 : Dikdörtgenimizin Genişliği 200px Olsun

300 : Dikdörtgenimizin Boyu 300px Olsun


 

HTML5 hgroup Etiketi ( 13.Ders h1…h6 Etiketlerini Guruplandırma)

<hgroup> Etiketimiz Sayfamızda birden fazla alt alta başlık tanımlayacağımız zaman kullanılır.

[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/10/HTML5-hgroup-Etiketi-13.Ders-h1…h6-Etiketlerini-Guruplandırma.html” icon=”” target=”true”]Örnek Kullanımı[/button]


 

HTML5 Embed Etiketi ( 12.Ders İçerik Çekme )

<embed> Etiketimizle Sayfanız Dışında Başka Bir Sayfadan veya Alandan Kaynak, İçerik, Eklenti Gibi Birçok Özelliği Sayfamıza Dahil Etmemize Yarayan Etiketimizdir.

[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/10/HTML5-Embed-Etiketi-12.Ders-İçerik-Çekme-.html” icon=”” target=”true”]Örnek Çalışma[/button]


Diyelim ki Bilgebank Sitemizin Logosunu Sayfanıza dahil etmek istiyorsun <embed> etiketimiz içinde src=” ile çekmek istediğiniz alanın url adresini belirliyorsunuz  height=”” width=”” Değerleri ile de boyutunu ayarlayabilirsiniz.

HTML5 Progress Etiketi ( 11.Ders Bar Göstergesi )

<progress> Etiketimiz Bir görevin, işlemin ilerleme veya tamamlanma sürecini görsel olarak göstermemizi sağlayan çok kullanışlı bir etiketimizdir.

[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/10/HTML5-Progress-Etiketi-11.Ders-Bar-göstergesi-.html” icon=”” target=”true”]Örnek Çalışma[/button]


Etiketimizde 2 Özellik Tanımlamamız Yeterlidir max=”” belitgecimizle Son Durum Değerini value=”” Değerinde İse Mevcut Değerini Belirtebilirsiniz.

HTML5 Video Etiketi ( 10.Ders Video Oynatıcısı )

<video></video> etiketimiz bir HTML belgesinde video elementini oynatmak için kullanılır.  Kullanımı Çok Basit ve Kullanışlıdır.

[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/10/HTML5-Video-Etiketi-9.Ders-Video-Oynatıcısı-.html” icon=”” target=”true”]Örnek Çalışmamız[/button]


src=”” İle İçeriğimizin Dosya Yolunu Belirtiriz.

type=”” İle de Dosya Formatımızı Belirleriz

controls=”controls” Komutumuz İle video Özelliğimizin Başlat, Durdur, Ses, İndirme, Tam Ekran Gibi Özelliklerinin Görünmesini Sağlar.

autoplay=”autoplay” Komutumuz İle video Özelliğimizin Tarayıcı Açıldıktan Sonra Otomatik Olarak Başlamasını Sağlar.

loop=”loop” Komutumuz İle Biten Videonun Tekrardan Otomatik Başlamasını Belirtir.

muted=”muted” Komutumuz İle video Özelliğimizin Sessiz Olarak Başlamasını Belirtiriz.

preload=”auto” Komutu İle Videonun Sayfa Yüklenirken Ön Belleğe Almasını Tanımlarız; preload=”none” İse tam Tersi Olarak Ön Yükleme Olmamasını Belirtiriz

poster=”” Komutumuz İle Video Başlamadan Önce Video Panelinde Görünmesini İstediğimiz Görseli Belirtiriz.

 

HTML5 Audio Etiketi(9.Ders Ses Dosyası Oynatıcısı)

Audio etiketimiz isminden de anlaşıldığı gibi ses dosyalarını web sayfalarımızda çalıştırmamıza yarar 3 ses formatını destekler. Ancak tarayıcılarda farklılık gösterebilir desteklediği ses formatları mp3, wav, ogg formatlarıdır mp3 formatı tüm tarayıcılarda sorunsuz çalışır.

[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/10/HTML5-Audio-Etiketleri9.Ders-audio-Kullanımı.html” icon=”” target=”true”]Örnek Çalışma[/button]

<audio >
     <source src="http://www.bilgebank.com/wp-content/uploads/2017/10/Ed-Sheeran-Shape-of-You.mp3" type="audio/mp3">
          <p style="color:red;">Tarayıcınız Audio Etiketini Desteklememektedir.</p>
</audio>

src=”” İle Dosya Yolumuzu Belirtiriz.

type=”” İle de Dosya Formatımızı Belirleriz.

controls=”controls” Komutumuz İle Audio Özelliğimizin Başlat, Durdur, Ses, İndirme Gibi Özelliklerinin Görünmesini Sağlar.

autoplay=”autoplay” Komutumuz İle Audio Özelliğimizin Tarayıcı Açıldıktan Sonra Otomatik Olarak Başlamasını Sağlar.

loop=”loop” Komutumuz İle Biten Parçanın Tekrardan Otomatik Başlamasını Belirtir.

muted=”muted” Komutumuz İle Audio Özelliğimizin Sessiz Olarak Başlamasını Belirtiriz.

Audio Özelliğimizin Üç Adet Ses Biçimi vardır: MP3, Wav ve Ogg.