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() :
Bir Tuval Nesne oluşturma
Bir oluşturabilir <canvas> kullanarak elemanı document. createElement() document. createElement() metodu:
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 |
Ç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
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