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 |
Yorumlar
Yorum Gönder