myNotlar Logo

<CANVAS>


FF Opera

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.
>
bosIcerikBoş 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
 
myNotlar Hakkında
Telif Hakkı © 2007-2009 mynotlar.com Tüm Hakları Saklıdır. Kopyalanamaz. Yayınlanamaz.
E-Posta : support@myNotlar.com

| Tek Kişilik Oyunlar | Sudoku | YasinKa |