HTML Canvas Referans Kılavuzu

HTML Canvas Referans Kılavuzu

HTML <canvas> etiketi, genellikle JavaScript aracılığıyla dinamik olarak grafik çizmek için kullanılır.

HTML <canvas> hakkında daha fazla bilgi edinmek için HTML Canvas Eğitimimize göz atın.

Renk, tarz ve gölge

Özellikler Açıklama
fillStyle Doldurma için renk, gradyan veya desen ayarlayın veya döndürün
strokeStyle Çizim için renk, gradyan veya desen ayarlayın veya döndürün
shadowColor Gölge için rengi ayarlayın veya döndürün
shadowBlur Gölge için bulanıklık seviyesini ayarlayın veya döndürün
shadowOffsetX Gölgeyi şekle olan yatay mesafeyi ayarlayın veya döndürün
shadowOffsetY Gölgeyi şekle olan dikey mesafeyi ayarlayın veya döndürün
Yöntem Açıklama
createLinearGradient() Doğrusal gradyan oluşturun (kanva içeriğinde kullanılır)
createPattern() Belirtilen yönde belirtilen elementi tekrarlayın
createRadialGradient() Dairesel/halka şeklinde bir gradyan oluşturun (kanva içeriğinde kullanılır)
addColorStop() Gradyan nesnesinde renkleri ve durak pozisyonlarını belirleyin

Çizgi tarzı

Özellikler Açıklama
lineCap Çizginin bitiş noktası tarzını ayarlayın veya döndürün
lineJoin İki çizginin kesiştiği yerde oluşturulan köşe türünü ayarlayın veya döndürün
lineWidth Mevcut çizgi genişliğini ayarlayın veya döndürün
miterLimit Maksimum yatay açı uzunluğunu ayarlayın veya döndürün

Dikdörtgen

Yöntem Açıklama
rect() Dikdörtgen oluşturun
fillRect() “Doldurulmuş” dikdörtgen çizin
strokeRect() Dikdörtgen çizin (doldurma olmaksızın)
clearRect() Belirtilen dikdörtgen içinde belirtilen pikselleri temizleyin

Yol

Yöntem Açıklama
fill() Mevcut çizimi (yolu) doldurun
stroke() Tanımlanmış bir yolu çizin
beginPath() Yeni bir yol başlatın veya mevcut yolu sıfırlayın
moveTo() Yolu kağıt üzerinde belirtilen noktaya taşıyın, çizgi oluşturmayın
closePath() Başlangıç noktasına dönen bir yol oluşturun
lineTo() Yeni bir nokta ekleyin ve bu noktadan sonraki belirtilen noktaya çizgi oluşturun
clip() Orjinal kağıttan herhangi bir şekil ve boyutlu bölge kesin
quadraticCurveTo() 创建二次贝塞尔曲线
quadraticCurveTo() İki kere bilezir çizgi oluşturur
bezierCurveTo() Üç kere bilezir çizgi oluşturur
arc() Bir arkaç/çizgi oluşturur (dairesel veya daire parçası oluşturmak için kullanılır)
arcTo() İki çizgi arasında bir arkaç/çizgi oluşturur

isPointInPath()

Yöntem Açıklama
Belirtilen nokta mevcut yolda ise true döndürür, aksi takdirde false döndürür Dönüşüm
scale() Mevcut çizimi daha büyük veya daha küçük hale getirir
rotate() Mevcut çizimi döndürür
translate() Kanvas üzerinde (0,0) konumunu yeniden haritalar
setTransform() Mevcut dönüşümü birim matrise geri ayarlar. Sonra transform() çalıştırılır

Metin

Özellikler Açıklama
font Metin içeriğinin mevcut yazı özelliklerini ayarlar veya döndürür
textAlign Metin içeriğinin mevcut hiza yöntemini ayarlar veya döndürür
textBaseline Metin çiziminde kullanılan mevcut metin çizgisini ayarlar veya döndürür
Yöntem Açıklama
fillText() Kanvas üzerinde 'doldurulmuş' metin çizer
strokeText() Kanvas üzerinde metin çizer (doldurma olmaksızın)
measureText() Belirtilen metin genişliğini içeren bir nesne döndürür

Görsel çizimi

Yöntem Açıklama
drawImage() Görseli, kanvasta veya videonun üzerine çizer

Piksel işlemleri

Özellikler Açıklama
width ImageData nesnesinin genişliğini döndürür
height ImageData nesnesinin yüksekliğini döndürür
data Belirtilen ImageData nesnesinin görsel verilerini içeren bir nesne döndürür
Yöntem Açıklama
createImageData() Yeni, boş bir ImageData nesnesi oluşturur
getImageData() Kanvas üzerinde belirtilen矩形的像素数据复制的 ImageData nesnesi döndürür
putImageData() Görsel verileri (belirtilen ImageData nesnesinden) kanvase geri koyar

Kompozisyon

Özellikler Açıklama
globalAlpha Çizimin mevcut alpha veya şeffaflık değerini ayarlar veya döndürür
globalCompositeOperation Yeni resmin nasıl mevcut resme çizileceğini ayarlar veya döndürür

Diğer

Yöntem Açıklama
save() Mevcut ortam durumunu kaydet
restore() Önceden kaydedilmiş yol durumunu ve özelliklerini geri döndür
createEvent() 　
getContext() 　
toDataURL()