JavaScript ile Canvas ve Grafikler

Canvas nedir?

Canvas, web sayfalarında grafikler ve çizimler oluşturmak için kullanılan bir HTML5 özelliğidir. JavaScript ile birlikte kullanıldığında, Canvas API'si web sayfalarına çizim, animasyon ve grafik özellikleri eklemek için kullanılabilir. Bu özellikler, web sayfalarını daha ilgi çekici ve etkileşimli hale getirmek için kullanılabilir. 

Tanımlama

Canvas bir web sayfasındaki dikdörtgen alan olarak tanımlanıp, tanımlamayı yapmak için de <canvas></canvas> elementini kullanırız. Canvas alanını varsayılan sınırları olmadığından biçimlendirmek gerekir ve biçimlendirmek için de aşağıdaki görseldeki özellikler kullanılır. 

"id" ile id , "width" ile genişliği, "height" ile yüksekliği ve "style" ile de stilini ayarlayabiliriz.

Canvas üzerinde yapacağımız tüm işlemleri <script></script> etiketleri içerisinde yaparız. Bu işlemleri de daha önce tanımlamış olduğumuz canvasa vermiş olduğumuz id ile erişim sağlayıp yaparız.

Koorinat Sistemi

Canvas alanı üzerinde yapacağınız her işlemin koordinatlarını girmek gerekir. Koordinat sistemi ise; sağdan sola x ekseninde artış, yuarıdan aşağıya is y ekseni üzerinde artış görülür.

İlk Çizgi

Canvas üzerine çizgi çizmek istersek öncelikle script elementlerinin arasına "var" özelliği ile değişken tanımlayıp,  daha önce oluşturmuş olduğumuz canvasa "document.getElementById" özelliği ile vermiş olduğumuz id'i kullanarak  erişim sağlayıp oluşturduğumuz değişkene eşitleriz. Daha sonra tanımlamış olduğumuz değişkenin içeriğine erişmek için ise ikinci bir değişken tanımlamalıyız. Bu işlemi "degiskenismi.getContext" özelliği ile yaparız. Değişkenleri tanımladıktan sonra "beginPath" ile çizimin başladığını belirtiyoruz.

"moveTo" ile başlangıç konumunu, "lineTo" ile çizginin çizileceği koordinatları belirtiyoruz. Yapmış olduğumuz çizginin bitmiş olduğunu belirtmek için ise "stroke" komutumu kullanıyoruz. 

Daire Çizmek

Daire çizmek için ise "arc" metodu kullanılır. arc(x ekseni, y ekseni, yarıçapı, başlama, bitiş koordinatları) şeklinde belirtiriz.

Yazı Yazmak

Canvas ile yapılacak şeylerden biri ise yazı yazabilmektir. Yazı yazmak için "fillText" ile dolgulu yazı "strokeText" ile içi boş yazı yazılabilir. 

Dolgulu yazı:

İçi Boş Yazı:

Dikdörtgen Çizmek

Canvas ile dikdörtgen çizmek için "fillRect" metodunu kullanabiliriz. Çizdiğimiz dikdörtgeni biçimlendirmek için ise "fillstyle" özelliğini kullanırız. 

Resim Çizme

Resim çizmek için "drawImage" özelliğini kullanırız. 

Mouse tıklandığında sayfaya resmi yüklemek için buton kullanılabilir.

Mouse İşlemleri

Canvas ile yapılabilecek bir başka şey ise mouse etkileşiminde bulunmak ve bu sayede daha dinamik websiteleri tasarlanabilir. Aşağıdaki görüldüğü gibi "addEventListener" ile mouse etkileşimi yakalanabilir. Yakalanan eventı ister "mousemove" ile mouse yolu üzerine şeyler yapabilir isterse de "click" ile tıklandığında birşeyler yapabilirsiniz. Yapmak istediğiniz eylemi de hemen öncesinde fonksiyon olarak tanımlamanız yeterli olacaktır.