HTML5'te canvas elementi nedir?

HTML5'te <canvas> öğesi, grafik çizmek için kullanılan bir konteynerdir (genellikle JavaScript ile). Tarayıcıda eklenti kullanmadan dinamik görselleştirmeler, oyunlar ve animasyonlar oluşturmayı sağlar.

Anahtar noktalar:

• Piksel ile çizim: Piksel seviyesinde çalışır ve her görüntü öğesi üzerinde tam kontrol sağlar.
• API kullanımı: <canvas> ile etkileşim, en yaygın olarak 2d bağlamı olan render API'si aracılığıyla gerçekleşir. Ayrıca 3D için webgl de mevcuttur.
• Boş tuval: <canvas> öğesi sadece bir konteynerdir. Tüm çizimler programlama yoluyla yapılır.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

// Canvas öğesini alıyoruz
const canvas = document.getElementById('myCanvas');

// 2D çizim bağlamını alıyoruz
const ctx = canvas.getContext('2d');

// Dikdörtgen çiziyoruz
ctx.fillStyle = "#FF0000"; // Doldurma rengi
ctx.fillRect(0, 0, 150, 75); // x, y, genişlik, yükseklik

Yetenekler arasında şunlar bulunur:

• Temel şekiller (çizgiler, dikdörtgenler, daireler, yaylar)
• Metin
• Görüntüler
• Gradyanlar ve desenler
• Yollar (path) kullanarak karmaşık şekiller