HTML5 Canvas Etiketi ( 15.Ders Canvas Yol Belirleme ) – BilgeBank
Perşembe , Haziran 21 2018
Anasayfa / DERSLER / Web Tasarım Dersleri / HTML5 Dersleri / HTML5 Canvas Etiketi ( 15.Ders Canvas Yol Belirleme )

HTML5 Canvas Etiketi ( 15.Ders Canvas Yol Belirleme )

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

Ö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(“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.

Hakkında BilgeBank

İlgili Makale

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 …

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: