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.

Örnek Çalışma

İ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