Açıklama HTML5 <canvas> (usually JavaScript) .
Ancak, <canvas>
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.
Tarayıcı Desteği Tablodaki rakamlar tamamen elemanı destekleyen ilk tarayıcı sürümü belirtin.
Eleman <canvas> 4.0 9.0 2.0 3.1 9.0
Internet Explorer 9, Firefox, Opera, Chrome ve Safari desteği <canvas>
Note: Internet Explorer 8 ve önceki sürümlerini desteklemez <canvas>
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 noktadan bu noktaya 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()