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