En son web geliştirme öğreticiler
 

HTML DOM Tuval Nesne


Tuval Nesne

Tuval Nesne HTML5'teki yenidir.

HTML5 <canvas> etiketi JavaScript ile anında, grafik çizmek için kullanılır.

Bir Tuval Nesne Erişim

Bir erişebilirsiniz <canvas> kullanarak elemanı getElementById() :

Örnek

var x = document.getElementById("myCanvas");
Kendin dene "

Bir Tuval Nesne oluşturma

Bir oluşturabilir <canvas> kullanarak elemanı document. createElement() document. createElement() metodu:

Örnek

var x = document.createElement("CANVAS");
Kendin dene "

Not: <canvas> elemanı kendine ait bir çizim yeteneklerini (Bu grafikler için sadece bir kapsayıcıdır) var - aslında grafik çizmek için bir komut dosyası kullanmalısınız.

getContext() metodu tuval üzerinde çizim için yöntemler ve özellikleri sağlayan bir nesne döndürür.

Bu referans, özellikleri ve yöntemleri kapsar getContext("2d") tuvale - metin, çizgiler, kutular, çevreleri ve daha çekmek için kullanılabilir nesne.


Renkler Styles, ve Gölgeler

özellik Açıklama
fillStyle Set veya çizim doldurmak için kullanılan renk, degrade veya desen döndürür
strokeStyle Ayarlar veya vuruş için kullanılan renk, degrade veya desen döndürür
shadowColor Ayarlar veya gölgeler için kullanılacak rengi döndürür
shadowBlur Ayarlar veya gölgeler için bulanıklık seviyesini döndürür
shadowOffsetX Ayarlar ya da şekilden gölge yatay mesafe döner
shadowOffsetY Ayarlar ya da şekilden gölge dikey mesafe döner
Yöntem Açıklama
createLinearGradient() Lineer gradyan oluşturur (to use on canvas content)
createPattern() belirtilen yönde belirli bir eleman yinelenir
createRadialGradient() Radyal / dairesel gradyan oluşturur (to use on canvas content)
addColorStop() renklerini belirtir ve bir gradyan nesne durdurma pozisyonları

Çizgi Stilleri

özellik Açıklama
lineCap Ayarlar veya bir hat boyunca uç başlıklarının stilini döndürür
lineJoin iki satır karşılamak ayarlar veya oluşturulan köşe türünü döndürür
lineWidth Ayarlar veya mevcut çizgi genişliği döndürür
miterLimit Ayarlar ya da en fazla gönye uzunluğu döndürür

Dikdörtgenler

Yöntem Açıklama
rect() bir dikdörtgen oluşturur
fillRect() Bir çizer "filled" dikdörtgen
strokeRect() Bir dikdörtgen çizer (no fill)
clearRect() Belirli bir dikdörtgen içinde belirli piksel temizler

Yollar

Yöntem Açıklama
fill() Mevcut çizim doldurur (path)
stroke() Aslında tanımladığınız yolunu çizer
beginPath() Bir yol Başlıyor veya mevcut yolu sıfırlar
moveTo() bir çizgi oluşturmaksızın, tuval belirtilen noktaya yolu taşır
closePath() başlangıç ​​noktasına geri akım noktasından bir yol oluşturur
lineTo() Yeni bir nokta ekler ve tuval son belirtilen noktaya bu noktadan bir çizgi oluşturur
clip() Orijinal tuval gelen Klipler herhangi bir şekil ve boyutta bir bölgeyi
quadraticCurveTo() ikinci dereceden bir Bezier eğrisi oluşturur
bezierCurveTo() bir Bezier eğrisi oluşturur
arc() Bir yay / eğrisi oluşturur (used to create circles, or parts of circles)
arcTo() iki teğet arasında bir ark / eğrisi oluşturur
isPointInPath() Belirtilen nokta akım yolunda ise aksi false, true döndürür

Dönüşümler

Yöntem Açıklama
scale() Geçerli çizim büyütmek veya küçültmek Scales
rotate() mevcut çizim döndürür
translate() Remaps (0,0) Tuval üzerine pozisyon
transform() Çizim için mevcut dönüşüm matrisi değiştirir
setTransform() mevcut kimlik matrise dönüştürmek döndürür. Sonra ishal transform()

Metin

özellik Açıklama
font Ayarlar veya metin içeriği için geçerli yazı tipi özelliklerini döndürür
textAlign Ayarlar veya metin içeriği için geçerli hizalama döndürür
textBaseline metin çizim setler ya da döner mevcut metin temel kullanılan
Yöntem Açıklama
fillText() Beraberlik "filled" tuval üzerine metni
strokeText() Tuval üzerine metin çizer (no fill)
measureText() Belirtilen metnin genişliğini içeren bir nesne döndürür

Görüntü Çizim

Yöntem Açıklama
drawImage() tuval üzerine resim, tuval, veya video çizer

Piksel manipülasyonu

özellik Açıklama
width Bir ImageData nesnesinin genişliği döndürür
height Bir ImageData nesnesinin yüksekliğini döndürür
data Belirli bir ImageData nesnesinin resim verileri içeren bir nesne döndürür
Yöntem Açıklama
createImageData() yeni, boş ImageData nesnesi oluşturur
getImageData() Bir ImageData nesnesi döndürür bir tuval üzerinde kopya belirtilen dikdörtgen için piksel verilerini
putImageData() Görüntü verilerini koyar (from a specified ImageData object) tuvale geri

birleştirme

özellik Açıklama
globalAlpha Ayarlar ya da çekme mevcut alfa ya da asetat değerini verir
globalCompositeOperation Yeni bir görüntü mevcut bir resmi üzerine çizilir nasıl ayarlar veya döner

Diğer

Yöntem Açıklama
save() Geçerli bağlamda durumunu kaydeder
restore() Daha önce kaydedilmiş yol durumunu ve özelliklerini döndürür
createEvent()
getContext()
toDataURL()

Standart Özellikleri ve Olaylar

Tuval nesnesi ayrıca standart destekler özelliklerini ve olaylarını .


İlgili Sayfalar

HTML öğretici: HTML5 Canvas

HTML referansı: HTML <canvas> etiketi