HTML5 Canvas ile Basit Çizimler Yapmak

Yorumlar

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.

HTML

<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:

HTML

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

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

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

Çizgi ve Daire Çizme

HTML

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.

Paylaş: Facebook X LinkedIn WhatsApp

Önceki Yazı

HTML5 ile Video ve Ses Kullanımı

Sonraki Yazı

SVG Kullanımı ve Animasyonlarla Etkileşimli Grafikler