En son web geliştirme öğreticiler
 

HTML Tuval Eğitimi


Tarayıcınız desteklemiyor <canvas> öğesi.

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

Soldaki grafik oluşturulur <canvas> . kırmızı dikdörtgen, bir gradyan dikdörtgen, çok renkli bir dikdörtgen ve bir renkli metin: Dört elemanlarını göstermektedir.


HTML Tuval nedir?

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

<canvas> öğesi grafikler için sadece bir kapsayıcıdır. Aslında grafik çizmek için bir komut dosyası kullanmalısınız.

Tuval yolları, kutular, daireler, metin, çizim ve resimler ekleyerek için çeşitli yöntemler vardır.


Tarayıcı Desteği

Tablodaki rakamlar tamamen destekleyen ilk tarayıcı sürümü belirtmek <canvas> öğesi.

Eleman
<canvas> 4.0 9.0 2.0 3.1 9.0

HTML Tuval Metin Çizme Can

Tuval ile veya animasyon olmadan, renkli metin çizebilirsiniz.


HTML Tuval Grafik Çiz Can

Tuval grafikleri ve çizelgeleri bir görüntü ile grafiksel veri sunumu için harika özelliklere sahiptir.


HTML Tuval Animasyon edilebilir

Tuval nesneleri taşıyabilirsiniz. Her şey mümkün: basitten karmaşığa animasyon zıplatma toplardan.


HTML Tuval İnteraktif olabilir

Tuval JavaScript olaylara yanıt verebilir.

Tuval herhangi bir kullanıcı eylemine (anahtar tıklar, fare tıklamaları, düğme tıklama, parmak hareketi) yanıt verebilir.


HTML Tuval Oyunlarında Kullanılan edilebilir

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


Tuval Örnek

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

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

<canvas> o JavaScript tarafından sevk edilebilmesi için eleman id niteliği olması gerekir.

genişlik ve yükseklik özelliği, tuval boyutunu belirlemek için gereklidir.

Tip: Birden olabilir <canvas> bir HTML sayfadaki öğeleri.

Varsayılan olarak, <canvas> öğesi hiçbir sınır ve içerik yok.

kenarlık eklemek için, bir stil özelliğini kullanın:

Örnek

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

Bir sonraki bölümlerde tuval üzerinde nasıl çizileceğini gösterir.