HTML Canvas

Canvas Elementi Tanımı

Tuval anlamına gelen HTML5 <canvas> etiketi genellikle JavaScript ile komut dizisi oluşturma yoluyla kolay bir şekilde grafikler çizmek için kullanılır.

Ancak <canvas> elementinin kendi başına çizim özelliği yoktur. (grafikler için sadece taşıyıcı görevi görür) - Grafikleri çizebilmek için bir komut dili kullanmalısınız.

getContext() metodu tuval üzerinde çizim yapmak için metodlar ve özellikler sağlayan bir nesneyi dönüştürür.

Bu sayfadaki referanslar; tuval üzerinde yazılar, çizgiler, kutular, daireler ve daha bir çok şeyi çizmek için kullanılabilen getContext("2d") nesnesinin özellikleri ve metodlarını kapsıyor.

Tarayıcı Desteği

Element
<canvas>	4.0	9.0	2.0	3.1	9.0

Internet Explorer 9, Firefox, Opera, Chrome ve Safari <canvas> etiketini, özelliklerini ve metodlarını destekliyor

Not: Internet Explorer 8 ve önceki sürümleri <canvas> elementini desteklemiyor.

Renkler, Stiller ve Gölgeler

Özellik	Tanım
fillStyle	Çizimi doldurmak için kullanılan renk, gradyan ya da modeli belirler veya dönüştürür
strokeStyle	Fırçalar için kullanılan renk, gradyan ya da modeli belirler veya dönüştürür
shadowColor	Gölgeler için kullanılacak olan rengi belirler veya dönüştürür
shadowBlur	Gölgeler için blur seviyesini belirler veya dönüştürür
shadowOffsetX	Şekilden gölgenin yatay uzaklığını belirler veya dönüştürür
shadowOffsetY	Şekilden gölgenin dikey uzaklığını belirler veya dönüştürür

Metod	Tanım
createLinearGradient()	Canvas içeriği üzerinde kullanmak için doğrusal bir gradyan oluşturur
createPattern()	Belirlenen doğrultuda belirli bir elementi tekrarlar
createRadialGradient()	Canvas içeriği üzerinde kullanmak için yayılan/dairesel bir gradyan oluşturur
addColorStop()	Bir gradyan nesnesinde renkleri ve durak noktalarını belirler

Çizgi Stilleri

Özellik	Tanım
lineCap	Bir çizginin son noktalarının stilini belirler veya dönüştürür
lineJoin	İki çizgi kesiştiğinde, oluşan köşe tipini belirler veya dönüştürür
lineWidth	Mevcut çizgi genişliğini belirler veya dönüştürür
miterLimit	Maksimum köşe uzunluğunu belirler veya dönüştürür

Dikdörtgenler

Metod	Tanım
rect()	Bir dikdörtgen oluşturur
fillRect()	İçi dolu bir dikdörtgen oluşturur
strokeRect()	İçi boş bir dikdörtgen oluşturur
clearRect()	Verilen dikdörtgen içerisindeki belirli pikselleri siler

Yörüngeler

Metod	Tanım
fill()	Mevcut çizim yörüngesini doldurur
stroke()	Tanımladığınız yörüngeyi fiilen çizer
beginPath()	Bir yörünge başlatır veya mevcut yörüngeyi resetler
moveTo()	Yörüngeyi, canvas üzerinde belirlenmiş noktaya doğru çizgi oluşturmadan hareket ettirir
closePath()	Mevcut noktadan başlangıç noktasına kadar yörünge oluşturur
lineTo()	Yeni bir nokta oluşturur ve o noktadan canvas üzerinde belirlenmiş olan son noktaya kadar bir çizgi oluşturur
clip()	Orjinal canvasta herhangi bir şekilde ve boyuttaki bölgeyi kırpar
quadraticCurveTo()	İkilenik bir Bézier kıvrımı oluşturur
bezierCurveTo()	Kübik bir Bézier kıvrımı oluşturur
arc()	Bir yay/kıvrım oluşturur (Daire ya da dairenin parçalarını oluşturmak için kullanılır)
arcTo()	İki tanjant arasında bir yay/kıvrım oluşturur
isPointInPath()	Belirlenen noktayı mevcut yörüngede ise true, değilse false değerine dönüştürür

Dönüşümler

Metod	Tanım
scale()	Mevcut çizimi daha büyük ya da küçük olarak ölçeklendirir
rotate()	Mevcut çizimi kendi çevresinde döndürür
translate()	Canvas üzerindeki (0,0) konumunu yeniden ayarlar
transform()	Çizim için mevcut dönüşüm kalıbını değiştirir
setTransform()	Mevcut dönüşümü kimlik kalıbına resetler. Daha sonra transform() çalışır

Metin

Özellik	Tanım
font	Metin için mevcut font özelliklerini belirler veya dönüştürür
textAlign	Mevcut metin içeriğinin hizalamasını belirler veya dönüştürür
textBaseline	Metin çizimi yaparken, kullanılan taban hizasını belirler veya dönüştürür

Metod	Tanım
fillText()	Canvasta dolgulu metin çizer
strokeText()	Canvasta dolgusuz, düz metin çizer
measureText()	Belirlenen metnin genişliğine sahip olan bir nesneyi dönüştürür

Resim Çizme

Metod	Tanım
drawImage()	Canvas üzerine resim, canvas ya da video çizer

Piksel Manipülasyonu

Özellik	Tanım
width	Bir ImageData nesnesinin genişliğini dönüştürür
height	Bir ImageData nesnesinin yüksekliğini dönüştürür
data	Belirli bir ImageData nesnesinin resim bilgisine sahip olan bir nesneyi dönüştürür

Metod	Tanım
createImageData()	Yeni, boş bir ImageData nesnesi oluşturur
getImageData()	Canvasta belirlenmiş dikdörtgenin piksel bilgisini kopyalayan bir ImageData nesnesini dönüştürür
putImageData()	Belirli bir ImageData nesnesinin resim bilgisini canvas üzerine getirir

Birleştirme

Özellik	Tanım
globalAlpha	Çizimin mevcut alfa ya da şeffaflık değerini belirler veya dönüştürür
globalCompositeOperation	Yeni bir resmin mevcut çizim üzerine nasıl çekileceğini belirler veya dönüştürür

Diğerleri

Metod	Tanım
save()	Mevcut içeriğin durumunu kaydeder
restore()	Önceden kaydedilmiş yönerge durumu ve özelliklerine dönüştürür
createEvent()	Adlandırılmış ya da adlandırılmamış bir olay nesnesini açar veya oluşturur
getContext()	Canvas üzerinde çizim yapmak için metodlar ve özellikler barındıran bir nesneyi dönüştürür.
toDataURL()	Tür özelliği tarafından belirlenmiş formattaki resmin (varsayılan olarak PNG) temsilini barındıran bir data URIs'i dönüştürür