Google ve Youtube Reklamlarını Engelleyen Tarayıcı ve Uygulama İndir

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

Yorumlar