HTML Tuval Eğitimi

HTML <canvas> öğesi, bir web sayfasında grafik çizmek için kullanılır.

Yukarıdaki grafik <canvas> ile oluşturulmuştur.

Dört öğe gösterir: kırmızı bir dikdörtgen, bir degrade dikdörtgen, çok renkli bir dikdörtgen ve çok renkli bir metin.

HTML Kanvas nedir?

HTML <canvas> öğesi, komut dosyası oluşturma (genellikle JavaScript) aracılığıyla anında grafik çizmek için kullanılır.

<canvas> öğesi yalnızca grafikler için bir kapsayıcıdır. Grafikleri gerçekten çizmek için bir komut dosyası kullanmalısınız.

Canvas, yollar, kutular, daireler, metin çizmek ve resim eklemek için çeşitli yöntemlere sahiptir.

Tarayıcı Desteği

Tablodaki sayılar, <canvas> öğesini tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

HTML Kanvas Metin Çizebilir

Tuval, animasyonlu veya animasyonsuz renkli metinler çizebilir.

HTML Kanvas Grafik Çizebilir

Canvas, grafikler ve çizelgelerden oluşan bir görüntü ile grafiksel veri sunumu için harika özelliklere sahiptir.

HTML Kanvas Hareketlendirilebilir

Tuval nesneleri hareket edebilir. Her şey mümkün: basit zıplayan toplardan karmaşık animasyonlara.

HTML Kanvas Etkileşimli Olabilir

Tuval, JavaScript olaylarına yanıt verebilir.

Canvas, herhangi bir kullanıcı eylemine (tuş tıklamaları, fare tıklamaları, düğme tıklamaları, parmak hareketi) yanıt verebilir.

HTML Kanvas Oyunlarda Kullanılabilir

Canvas'ın animasyon yöntemleri, HTML oyun uygulamaları için birçok olanak sunar.

Tuval Örneği

HTML'de bir <canvas> öğesi şöyle görünür:

JavaScript tarafından başvurulabilmesi için <canvas> öğesinin bir id özniteliğine sahip olması gerekir.

Genişlik ve yükseklik özelliği, tuvalin boyutunu tanımlamak için gereklidir.

İpucu: Bir HTML sayfasında birden çok <canvas> öğesi olabilir.

Kenarlık eklemek için bir stil niteliği kullanın:

Sonraki bölümler tuval üzerine nasıl çizileceğini gösterir.