Html5 Canvas Kullanımı

Html5 özelliklerinden olan “canvas” html web sayfalarında ihtiyaç duyulan grafik ihtiyaçları için oluşturulmuş nisbeten yeni bir özelliktir. Oluşturulabilecek grafiklerin başlıcaları, geometrik şekiller, metinler ve resimlerdir.

“Canvas” elementinin html kullanımı en basit şekliyle şu şekildedir;

<canvas id=”Canvas-1″ width=”200″ height=”100″></canvas>

 

Aynı html sayfasında birden fazla canvas kullanılabilir. Varsayılan olarak border ve içeriği olmayan canvasda istediğiniz özellikleri kullanabilirsiniz.

style=”border:1px solid #000000;”>

 

Html Canvas üzerinde oluşturulacak çizimler, Javasript ve Css ile oluşturulur.

“var canvas = document.getElementById(“Canvas-1″); ” Javasriptin hangi alanda çalışacağını belirlemek için kullanılan satırdır.

Htmlde oluşturulan nesneler için kullanılan “getContext(); “ özellik belirtilmiş olur ve çizim yöntemine yer verilir (genelde 2d olarak).

Şekil, yazı veya çizimin özelliklerini “ctx.” Den sonra eklediğiniz özellik ile belirleyebilirsiniz.

ctx.fillStyle = “#FF0000”;

ctx.fillRect(0,0,150,75);

 

Html Canvas – Renk, Stil, Gölgelendirme Özellikler

Özellik – Açıklaması

fillStyle Renk, gradient veya kullanılacak desen belirlemek için kullanılır.

strokeStyle Renk, gradient, veya kullanılacak desende kenarlık stili belirtmek için kullanılır.

shadowColor Gölgelendirmeler için renk seçiminde kullanılır.

shadowBlur Gölgelendirmeler için blur seviyesi ayarlamakta kullanılır.

shadowOffsetX Gölgenin yatay olarak şekilden mesafesini belirtmek için kullanılır.

shadowOffsetY Gölgenin dikey olarak şekilden mesafesini belirtmek için kullanılır.

 

Canvasta Koordinatlar

Html canvas 2 boyutlu bir çalışma alanıdır. Üst-sol köşe noktası koordinat değeri (0,0)dır. Değerler sağ alt köşeye indikçe yükselir.

 

Çizgi Çizmek

Canvas üzerinde düz bir çizgi çizmek için

moveTo(x,y) çizginin başlangıç noktasını belirlemek için kullanılır.

lineTo(x,y) çizginin bitiş noktasını belirlemek için kullanılır.

Çizimi tamamlamak için yazmak üzere bir “ink” yöntemi belirlemek gerekir, mesela stroke gibi. “strokeStyle” çizgi rengini belirtmek için kullanılır.

 

See the Pen ZGjQgM by MinimalCoding (@MinimalCoding) on CodePen.

 

Line Stilleri

Özellik – Açıklaması

lineCap Çizgi stili, belirtildiğinde ‘round’ veya ‘square’ olarak kullanılabiliyor.

lineJoin İki çizginin birleştiği köşenin türünü belirlemekte kullanılıyor. ‘miter’, ’round’, ’bevel’ seçenekleri mevcut. Varsayılan olarak miter stili geliyor.

lineWidth Varolan çizgi genişliğini belirlemekte kullanılır.

miterLimit Maksimum miter uzunluğunu belirlemede kullanılır.

 

Daire Çizmek

Html5 Canvas ile daire çizerken kullanacağınız başlıca metodlar şunlardır;

beginPath();

arc(x,y,r,start,stop)

arc() ile bir daire oluşturduktan sonra, stroke() metodunu kullanmak gibi kolay bir kullanımla daire çizebilirsiniz

 

See the Pen YXjqKy by MinimalCoding (@MinimalCoding) on CodePen.

 

Gradient Oluşturmak

Gradient özelliği dikdörtgenleri, daireleri, çizgileri, metin vb. canvas ile yaptığımız tüm çizimlerde kullanılabilir. Canvas için 2 tür gradient kullanımı bulunmaktadır.

createLinearGradient(x,y,x1,y1)

createRadialGradient(x,y,r,x1,y1,r1)

Gradient nesnesini oluşturduğunuzda en az bir veya daha fazla “colorStop”la renk geçiş noktalarını belirtmeniz gerekir.

 

See the Pen rVreBQ by MinimalCoding (@MinimalCoding) on CodePen.

 

Metin oluşturmak

Canvasta metin oluştururken font, fillText(text,x,y), strokeText(text,x,y) kullanılarak oluşturulacak metnin özellikleri belirtilir.

Metin alanının daha kontrol edilebilir olması için kullanabileceğiniz diğer özellikler şu şekildedir:

textAlign – hizalama için

textBaseline – alan üzerinde konum belirleme

textMetrics – metnin genişliğini belirleme

textWrap – metni kaydırma

See the Pen eNjZYP by MinimalCoding (@MinimalCoding) on CodePen.

 

Canvas – Resimler

Html Canvasa resim yerleştirmek için “drawImage(image,x,y)” i kullanabilirsiniz. Resmin yüklenebilmesi için window.onload fonksiyonunun kullanılması gerekir.