HTML <tuval> Etiketi
Örnek
Anında kırmızı bir dikdörtgen çizin ve onu <canvas> öğesinin içinde gösterin:
<canvas id="myCanvas">
Your browser
does not support the canvas tag.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Etiket <canvas>, komut dosyası oluşturma (genellikle JavaScript) aracılığıyla anında grafik çizmek için kullanılır.
Etiket <canvas>saydamdır ve yalnızca grafikler için bir kaptır, grafikleri gerçekten çizmek için bir komut dosyası kullanmalısınız.
Öğenin içindeki herhangi bir metin <canvas>, JavaScript'in devre dışı bırakıldığı tarayıcılarda ve desteklemeyen tarayıcılarda görüntülenecektir <canvas>.
İpuçları ve Notlar
İpucu: HTML Kanvas Eğitimimizdeki<canvas> öğe
hakkında daha fazla bilgi edinin .
İpucu: Tüm özelliklerin ve yöntemlerin eksiksiz bir referansı için lütfen HTML Kanvas Referansımızı ziyaret edin .
Tarayıcı Desteği
Tablodaki sayılar, öğeyi tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Öznitellikler
| Attribute | Value | Description |
|---|---|---|
| height | pixels | Specifies the height of the canvas. Default value is 150 |
| width | pixels | Specifies the width of the canvas Default value is 300 |
Genel Özellikler
Etiket ayrıca HTML'deki Global Nitelikleri<canvas> de destekler .
Etkinlik Özellikleri
Etiket ayrıca HTML'deki Etkinlik Niteliklerini<canvas> de destekler .
Daha fazla örnek
Örnek
Başka bir <canvas> örneği:
<canvas id="myCanvas">
Your browser does not
support the canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20,
20, 75, 50);
//Turn transparency on
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle
= "green";
ctx.fillRect(80, 80, 75, 50);
</script>
Varsayılan CSS Ayarları
Çoğu tarayıcı, <canvas>öğeyi aşağıdaki varsayılan değerlerle görüntüler:
Örnek
canvas {
height: 150px;
width: 300px;
}