HTML Canvas (Tuval) Nedir?
Bir <canvas> elemanı, bir web sayfasına, bir şekil (grafik) çizmek için kullanılır.
Yandaki resim, <canvas> elemanıyla oluşturulmuş dört tane şekil içermektedir. Bunlar: bir kırmızı dikdörtgen (red rectangle), bir gradient rectangle, bir çok renkli rectagle ve bir çok renkli text.
<canvas> elemanları, genellikle javascript kullanarak, hızlıca grafikler (şekiller) çizmek için kullanılır.
<canvas> elemanı sadece grafikler çizmek için kullanılmalıdır.
<canvas> elemanı; resimler, kutular, çemberler, textler çizmek için bir çok metoda sahiptir.
Tarayıcı Destekleri
Aşağıda tarayıcıların hangi sürümden itibaren <canvas> elemanını destekledikleri verilmiştir.
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
HTML Canvas Yazı Çizebilir:
Canvas, animasyonlu veya animasyonsuz, renkli yazılar çizebilir.
HTML Canvas Grafikler Çizebilir:
Canvas; (resimli, grafikli, şemalı) grafiksel veriler hazırlamamızı sağlayabilecek harika özellikler içerir.
HTML Canvas Grafikleri Canlandırılabilir:
Canvas grafikleri, hareket edebilir. Canvas ile basit sıçrayan bir toptan, karmaşık animasyonlara kadar bir çok uygulama yapılabilir.
HTML Canvas İnteraktif Olabilir:
Canvas elemanları, JavaScript hareket kodlarına cevap verebilir. Bir fare tıklaması ile bir canvas elemanına bir çok aksiyon yaptırmak mümkündür.
HTML Canvas Oyunlarda Kullanılabilir:
Canvas'ın animasyon metodları, HTML oyun uyglamaları için bir çok imkan sağlar.
HTML Canvas Elemanı:
Aşağıda bir <canvas> elemanı örneği verilmiştir:
<canvas id="myCanvas" width="200" height="100"></canvas>
<canvas> elemanı, bir id özelliği içermelidir. Bu id sayesinde, javascript kodlarıyla bu <canvas> elemanına ulaşmak mümkün olur.
width ve height özellikleri, <canvas> elemanına boyut vermek için gereklidir.
Bir html sayfası, birden çok <canvas> elemanı içerebilir.
Varsayılan olarak, bir <canvas> elemanı, kenarlıksız ve içeriksizdir.
Kenarlık eklemek için CSS özelliklerine başvurulur:
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
style="border:1px solid #000000;">
</canvas>
Sonraki derste, bir <canvas> elemanı ile nasıl bir grafik cizileceğini göstereceğiz.
Hiç yorum yok:
Yorum Gönder