<CANVAS>

HTML <CANVAS> etiketi, çizim, grafik ve diğer görsel ögeleri oluşturmak için kullanılabilen çözünürlüğe bağlı bir bit eşlem (bitmap) tuvali (canvas) oluşturulmasını sağlar.

HTML Sözdizimi ve Özellikler

<CANVAS
id=	Eşsiz kimliğini belirtir.
class=	Sınıf adını belirtir.
style=	CSS kuralları tanımlar.
title=	Kısa bilgi belirtir.
lang=	İçerdiği metnin lisanını belirtir.
dir=	İçerdiği metnin yönünü belirtir.
width=	Genişliği belirtir.
height=	Yüksekliği belirtir.
>
bosIcerik	Boş olmalıdır.
</CANVAS>

HTML & JavaScript Olayları

<CANVAS
onclick=	Elemente klavye veya fare ile tıklandığında tetiklenir.
ondblclick=	Elemente fare ile çift tıklandığında tetiklenir.
onmousedown=	Element üzerinde fare tuşuna basıldığında tetiklenir.
onmouseup=	Basılı olan fare tuşu bırakıldığında tetiklenir.
onmouseover=	Elementin kapladığı alana girildiğinde tetiklenir.
onmousemove=	Element üzerinde fare işaretçisi hareket ettirildiğinde tetiklenir.
onmouseout=	Elementin kapladığı alandan çıkıldığında tetiklenir.
onkeypress=	Element üzerindeyken klavyeden bir tuşa basıldığında tetiklenir.
onkeydown=	Element üzerindeyken klavyeden bir tuşa ilk basıldığında tetiklenir.
onkeyup=	Basılı olan klavye tuşu bırakıldığında tetiklenir.
></CANVAS>

Örnek

Aşağıdaki örnek, HTML CANVAS etiketi ile oluşturulan bir çizim alanına bir kaç şekil çizilmesini göstermektedir.

<script type="text/javascript">
function cizimYap() {    
    // İçerik tipi belirtilerek API nesnesi alınıyor. (Sadece '2d' belirtilebilir.)
    var kaynak = document.getElementById("tuval").getContext('2d');
	
    kaynak.fillRect(10,10,50,50);    // Sol üst köşesi 10x10 konumunda olan 50x50 
                                     // ölçülerinde içi dolu kare çiziliyor.
    
    kaynak.beginPath();         // Yüzey oluşturulmasına başlanıyor. (Üçgen başladı)
    kaynak.lineJoin = 'round';  // Çizgi kesişimleri yuvarlatılmış olarak belirleniyor.
    kaynak.lineWidth = 5;       // Çizgi kalınlığı 5px
    kaynak.moveTo(70,10);       // Yüzeyin ilk noktası ekleniyor.
    kaynak.lineTo(100,85);      // bir önceki nokta ile düz bir çizgi ile bağlantılı 
                                // olarak bir nokta daha ekleniyor.
    kaynak.lineTo(130,10);      // bir önceki nokta ile düz bir çizgi ile bağlantılı 
                                // olarak bir nokta daha ekleniyor.
    kaynak.closePath();         // Yüzey, son noktadan ilk noktaya düz bir çizgi 
                                // çizilerek kapatılıyor.
    kaynak.stroke();            // Yüzeyin tamamı içi boş olarak çiziliyor. (Üçgen bitti)
    
    kaynak.beginPath();
    kaynak.arc(50, 100, 30, 0, Math.PI, false);
    kaynak.stroke();            // İçi boş yarım daire çizer.
    
    kaynak.beginPath();
    kaynak.arc(150, 100, 30, 0, Math.PI, false);
    kaynak.fill();              // İçi dolu yarım daire çizer.
}
</script>

<button type="button" onclick="cizimYap()">Çizim Yap</button>
<br/><br/>
<canvas style="border:solid 1px black;" id="tuval" width="300" height="200">
</canvas>

Test Edin

İlgili Başlıklar