HTML5’in sunduğu en güçlü özelliklerden biri <canvas> etiketidir. Bu etiket, JavaScript kullanarak grafikler, şekiller ve animasyonlar çizmemize olanak tanır. Özellikle oyun geliştirme, veri görselleştirme ve interaktif web projeleri için oldukça kullanışlıdır.

Canvas Kullanımı

Öncelikle bir <canvas> elementi oluşturarak çizim yapmaya başlayabiliriz.

<canvas id="cizimAlani" width="500" height="300" style="border:1px solid #000;"></canvas>

Basit Bir Şekil Çizme

Şimdi JavaScript kullanarak bu alana bir dikdörtgen çizelim:

<script>
var canvas = document.getElementById("cizimAlani");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 200, 100);
</script>

Bu kod, 50×50 konumunda 200×100 boyutlarında mavi bir dikdörtgen çizer.

Çizgi ve Daire Çizme

ctx.beginPath();
ctx.moveTo(50, 200);
ctx.lineTo(250, 200);
ctx.strokeStyle = "red";
ctx.lineWidth = 5;
ctx.stroke();

ctx.beginPath();
ctx.arc(350, 150, 50, 0, Math.PI * 2);
ctx.fillStyle = "green";
ctx.fill();

Bu kod, bir kırmızı çizgi ve yeşil bir daire çizer.

HTML5 Canvas, web üzerinde grafik ve animasyon oluşturmak için güçlü bir araçtır. JavaScript ile birlikte kullanılarak çok daha gelişmiş interaktif uygulamalar geliştirmek mümkündür. Basit şekillerden başlayarak, animasyonlar ve oyun tasarımlarına kadar geniş bir kullanım alanına sahiptir.