HTML5 Canvas Etiketi ( 14.Ders Canvas İle Çalışma Alanı Oluşturma) – BilgeBank
Anasayfa / DERSLER / Web Tasarım Dersleri / HTML - CSS Dersleri / HTML5 Canvas Etiketi ( 14.Ders 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 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.

Örnek Çalışma

İ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


 

Hakkında BilgeBank

İlgili Makale

CSS3 Dersleri 2 border-radius Kenar Yuvarlama

CSS3 ile birlikte gelen border-radius özelliğimiz, HTML etiketlerinin kenarlarını yuvarlamak, oval yapmak için kullanılır. Web …

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: