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