HTML5 Canvas ile Oyun Geliştirme Temelleri

HTML5 Canvas ile tarayici uzerinde 2D oyunlar ve animasyonlar yapabilirsiniz!

Temel Canvas Kullanimi

<!-- (c) CodeMareFi - codemarefi.com.tr -->
<canvas id="oyun" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('oyun');
const ctx = canvas.getContext('2d');

// Arkaplan
ctx.fillStyle = '#0a0a0a';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// Kirmizi kare
ctx.fillStyle = '#e60000';
ctx.fillRect(100, 100, 50, 50);

// Daire
ctx.beginPath();
ctx.arc(400, 300, 30, 0, Math.PI * 2);
ctx.fillStyle = '#fff';
ctx.fill();

// Yazi
ctx.fillStyle = '#e60000';
ctx.font = 'bold 24px Outfit';
ctx.fillText('CodeMareFi', 300, 50);
</script>

Animasyon Dongusu

// (c) CodeMareFi - codemarefi.com.tr
let x = 0;
function animasyon() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#e60000';
  ctx.fillRect(x, 200, 50, 50);
  x = (x + 2) % canvas.width;
  requestAnimationFrame(animasyon);
}
animasyon();