
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şturulabilece
“Canvas” elementinin html kullanımı en basit şekliyle şu şekildedir;
<canvas id=”Canvas-1″ width=”200″ height=”100″></c
Aynı html sayfasında birden fazla canvas kullanılabilir. Varsayılan olarak border ve içeriği olmayan canvasda istediğiniz özellikleri kullanabilirsini
style=”border:1p
Html Canvas üzerinde oluşturulacak çizimler, Javasript ve Css ile oluşturulur.
“var canvas = document.getElem
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 belirleyebilirsi
ctx.fillStyle = “#FF0000”;
ctx.fillRect(0,0
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,
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.
createLinearGrad
createRadialGrad
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,
Metin alanının daha kontrol edilebilir olması için kullanabileceğin
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
Minimal Coding Privacy Policy
Sitemizi ziyaret eden kullanıcılar aşağıdaki koşulları, yazılanlarla sınırlı olmamak şartıyla kabul etmiş sayılacaktır. “www.minimalcoding.net” sitesinde yer alan tüm bilgiler,tasarım,logo,yorum ve tavsiyeler ile ses, görüntü, yazı içeren bilgi ve belgeler (“İçerik”) ile buradan yapılan tüm linkler, kullanıcıya genel bilgi vermek amacıyla sunulmuştur.
Burada mevcut olan İçerik, Minimal Coding'i Kaynak göstermeden paylaşılamaz ve yayınlanamaz. Bu siteye erişim serbest ve anonimdir.