🚀 HTML5 Canvas: Web Üzerinde Piksel Sanatı ve 2D Dünyalar

Canvas Nedir ve Neden Önemli?

Selamlar! Bugün web dünyasının belki de en eğlenceli etiketi olan <canvas> konusuna giriyoruz. Canvas, aslında HTML içinde bize sunulan boş bir resim tuvalidir. Bu etiketin tek başına bir işlevi yoktur; o sadece bir kap (container) görevi görür. Asıl sihir, JavaScript ile bu tuvalin üzerine pikselleri tek tek boyamaya başladığımızda gerçekleşir.

Eskiden, oyun motorları bu kadar gelişmeden önce (hatta bizim Neon Pong gibi ilk arcade denemelerimizde), ekranın her karesini bu API ile elle çizdirirdik. Modern framework'ler arka planda çok karmaşık işler yapsa da, temel her zaman aynıdır: Bir referans al, içeriği (context) belirle ve çizmeye başla.

Temel Yapı ve Koordinat Sistemi

Canvas'ta en önemli kural şudur: Sol üst köşe her zaman (0,0) noktasıdır. Sağa doğru gittikçe X, aşağı doğru gittikçe Y değeri artar.

<canvas id="gameCanvas" width="800" height="600"></canvas>

Not: Canvas genişliğini ve yüksekliğini CSS ile değil, mutlaka HTML niteliği (attribute) olarak verin. Aksi halde çizimlerinizde orantısız bozulmalar ve bulanıklıklar yaşarsınız.

getContext('2d') Nedir?

Kodda gördüğünüz getContext('2d') ifadesi, tarayıcıya "Ben bu tuval üzerinde iki boyutlu grafikler çizeceğim, bana gerekli araç kutusunu ver" demektir. Bu metot size bir nesne döner ve tüm çizim fonksiyonları (daire çizme, renk doldurma, resim yerleştirme) bu nesnenin içindedir.

Temel Çizim Fonksiyonları:

• fillRect(x, y, w, h): İçi dolu dikdörtgen.
• strokeRect(x, y, w, h): Sadece kenarlıkları olan dikdörtgen.
• beginPath(): Yeni bir şekil çizimine başlar (kalemi kağıda koymak gibi).
• arc(): Yay veya daire çizer.
• fill(): Mevcut yolu boyar.

Biz genelde oyun geliştirirken, requestAnimationFrame kullanarak bu çizim fonksiyonlarını saniyede 60 kez çalıştırırız. Böylece statik duran bu kareler, akıcı birer animasyona dönüşür. Canvas'ın gücü, donanım hızlandırmalı (GPU) çalışmasında yatar; yani binlerce parçacığı (particle) bile kasmadan ekrana dökebilirsiniz.

Ovid Game Teknik Günlüğü - Keyifli kodlamalar! ovidgame.com