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

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.

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

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 …

Bir Cevap Yazın