HTML Canvas Nedir ?

HTML sayfası üzerinde istediğiniz bir şekilde çizim yapmaya ve bu çizimleri kullanarak dinamik bir görünüm sağlamaya yarayan bir HTML etiketidir. Canvas ile Javascript’den de faydalanarak çeşitli oyunlar kodlanabilmekte ya da çeşitli animasyonların gerektiği HTML sayfalarının tasarımları da gerçekleştirilebilmektedir. Daha iyi anlamanız adına teknik detaylar yerine günlük dile daha yakın bir anlatımı sizler için uygun gördüm.Canvas tasarımları 2D (iki boyutlu) veya 3D (özellikle oyun tasarımlarında) şekilde oluşturulabilmektedir. HTML5 teknolojisinin sağladığı en önemli özelliklerden biri hiç şüphesiz “canvas” etiketinin ortaya çıkmasıdır.

Temel Şekiller

Çizgi (Line)

Web sayfası üzerine bir çizgi çizebilmesini sağlayan bir özelliktir. Çizilecek çizginin kalınlığı,uzunluğu,eğimi,rengi gibi bir çok özelliği yapacağınız tanımlamalar ile belirleyebilirsiniz.
Temel bazı fonksiyonları kullanarak çizgi özelliklerini belirleriz.İşte bunlardan bazıları :
1.lineTo(): Çizgi eğimini belirlemek için kullanılır. Çizginin eğik yada düz olmasını bu özellik sayesinde ayarlayabiliriz.
2.beginPath(): Çizim yapılmaya başlandığığını deklara eden canvas metodudur. Bu metot line(çizgi) oluşturmak için her zaman gereklidir.
3.stroke(): Çizimin bittiğini ve uygulanmasını gerektiğini belirten ,çizimi tamamlayan canvas metodudur. Bu metodun uygulanmasına da verdiğim linkten faydalanabilirsiniz
4.moveTo(): Konum belirleyen canvas line metodudur. Çizginin koordinat olarak nerede bululacağını ve pozisyonunu ayarlamak için kullanılır.

Not : Kodları uygulamak için eğitim sitemiz olan kendindene.tolgasariyildiz.com.tr ‘ den faydalanabilirsiniz. Ulaşmak için linke tıklayınız.

Eğimli Çizimler

1. ARC: Dairesel olarak eğim sağlayan ve verilen değerlere göre koordine olan bir çizim şeklidir. Photoshop bilen bir kişinin mutlaka duymuş olması gereken bir yazı biçimi olan arc canvas da sıklıkla kullanılan bir çizim biçimidir. (Örneklere Kendin Dene sitemizden ulaşabilirsiniz.)

2.İkinci dereceden Eğriler: Genellikle bir denklemin eğrilerle gösterilmesi için kullanılır. Grafiklerin kullanılması gereken bilimsel bir makalemiz olduğunu düşünürsek kulllanmamızın şart olduğu bir Canvas çizimidir. Eğrinin en önemli noktası eğimi belli bir orta noktaya göre gerçekleştirmesi ve bunun dairesel olarak gerçekleştirmesidir.

img_quadraticcurve

Başlangıç : moveTo(20,20)

Kontrol Noktaları: quadraticCurveTo(20,100,200,20)

Bitiş Noktaları: quadraticCurveTo(20,100,200,20)
Not : Görsel http://www.w3schools.com/tags/quadraticcurveto adresinden alınmıştır. W3schools sitesine aittir. Örnek kullanıma buradan ulaşabilirsiniz.

3. Bezier Eğrisi : Daha üst derecede eğim sağlayan bir çizm gerçekleştirir.İki belirleyici noktanın yer aldığı metotda gerekli çizim koordinat düzleminde gerçekleşir ve koordinat bilgilerini sayısal olarak belirlemek gerekir.Uygulamak için verdiğim linkte yer alana eğitim sitemizin içeriğini kullanabilirsiniz.

Paths (Çizim Alanı – Çizim Tuali)

1. Path

Path kullanılarak bir çok çizgi bir araya getirilerek daha ayrıntılı çizimler gerşekleştirilebilir. beginPath() metodu ile çizim başlatılır ve gerekli metodlarla oluşturulan çizgiler birleştirilerek stroke() metodu ile çizim tamamlanır. Örnek kullanım için : Path Uygulaması

2. lineJoin()

Birleşen iki çizginin birleşim biçimini belirleyen (yuvarlak köşeli,keskin vb.) canvas özelliğidir. Gerekli olan duruma göre istediğiniz biçimi kullanabilirsiniz. Örnek kullanım için tıklayınız.3. Yuvarlak Köşe Çizimi : Bu çizimin gerçekleşmesi için gereken bir çok metod vardır ve bunların ortak kullanımı ile gerekli işlem gerçekleştirilir. Kodlarımıza ve uygulamasına bu linkten ulaşabilirsiniz.Canvas hakkında bilgiler verdiğimiz giriş yazımıızın sonuna geldik . Daha sonraki yazılarımızda HTML Canvas konusuna devam edeceğiz. İyi çalışmalar…