HTML Canvas Eğitimi

HTML <canvas> elementi, web sayfalarında grafik çizmek için kullanılır.

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

Dört element gösterir: kırmızı dikdörtgen, soluk dikdörtgen, çok renkli dikdörtgen ve çok renkli metin.

HTML Canvas nedir?

HTML <canvas> ögesi, script (genellikle JavaScript) aracılığıyla dinamik olarak grafik çizmek için kullanılır.

<canvas> ögesi sadece grafik konteyneridir. Gerçek grafikleri çizmek için script kullanmanız gerekir.

Canvas, yol, kutu, daire, metin ve resim eklemek için çeşitli yöntemler sunar.

HTML Canvas metin çizebilir

Canvas, renkli metin çizebilir ve aynı zamanda animasyon efekti de ekleyebilir.

HTML Canvas grafik çizebilir

Canvas, grafik ve grafiklerle veri görselleştirme için güçlü bir yetenek sunar.

HTML Canvas animasyonlandırılabilir

Canvas nesnesi hareket edebilir. Her şey mümkün: Basit bir sıçrayan top'tan karmaşık animasyonlara kadar.

HTML Canvas iletişimli

Canvas, JavaScript olaylarına yanıt verebilir.

Canvas, her türlü kullanıcı işlemine (tuş tıklaması, fare tıklaması, düğme tıklaması, parmak hareketi) yanıt verebilir.

HTML Canvas oyunlara uygulanabilir

Canvas'in animasyon yöntemleri, HTML oyun uygulamalarına birçok olasılık sunar.

Canvas Örneği

HTML'de, <canvas> ögesi şu şekilde görünüyor:

<canvas id="myCanvas" width="200" height="100"></canvas>

<canvas> ögesi, JavaScript'in onu referans alabilmesi için id özelliğine sahip olmalıdır.

Width ve height özellikleri, çizim alanının boyutunu tanımlamak için de gereklidir.

İpucu: Bir HTML sayfasında birden fazla <canvas> ögesi olabilir.

Varsayılan olarak, <canvas> ögesi çerçeve içermeyip içerik de taşımaz.

Çerçeve eklemek için style özelliğini kullanın:

Örnek

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

Kişisel olarak deneyin

Sonraki bölümler, nasıl çizim yapılacağını anlatacak.

Ayrıca bakınız:

CodeW3C.com tam Canvas referans el kitabı

Tarayıcı desteği

<canvas> ögesi HTML5 standardıdır (2014).

Tüm modern tarayıcılar <canvas>yi destekler: