HTML5 Canvas Etiketi ( 18.Ders Canvas İle Metin Oluşturma ) – BilgeBank
Anasayfa / DERSLER / Web Tasarım Dersleri / HTML - CSS Dersleri / HTML5 Canvas Etiketi ( 18.Ders Canvas İle Metin Oluşturma )

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.

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: