HTML5 Canvas · Çizim & path

Şekil çizimi: katalog, kısayollar ve boyanmış primitive’ler

Canvas 2D’de «şekil» çoğu zaman bir dikdörtgen, daire veya yuvarlatılmış panel demektir — tarayıcı sık kullanılan bu figürleri hazır fonksiyonlarla sunar ki arka plan ızgarası, düğme zeminleri ve minimap blokları için tekrar tekrar lineTo zinciri yazmak zorunda kalmayasınız. Kısayol çağrıları doğrudan piksele yazar; path tabanlı alternatif ise aynı silüeti beginPath ile kurup fill/stroke ile tamamlamaktır. Bu sayfa, hangi API’nin hangi üretim senaryosuna uyduğunu ve şekilleri stil ile nasıl paketleyeceğinizi canvas üreticisi gözüyle sabitler.

Alt yol disiplini Path sistemi sayfasında; dolgu ve kontur ayrımı Stroke vs fill sayfasında; eğri ağırlıklı silüetler Eğri mantığı konusunda. Stil dalları ve kırpma State sistemi ile yönetilir — burada geometri seçimi ve şekil kataloğu ön plandadır.

Özet: şekil API’leri

Aile	Örnek	Özellik
Dikdörtgen kısayolu	`fillRect`, `strokeRect`	Eksen paralel kutu; path açmadan boyar
Temizleme	`clearRect`	Piksel siler; boya komutu değildir
Yuvarlatılmış kutu	`roundRect` (path)	Panel / kart; ardından fill veya stroke
Yuvarlak	`arc`, `ellipse`	Path parçası; açılar radyan

Kısayol mu, path mi: seçim sözleşmesi

fillRect ve strokeRect, tek satırda «şunu çiz» emridir — parametreleri dünya veya HUD uzayındaki dikdörtgen köşesi ve ölçülerdir ( Koordinat sistemi ). Path tabanlı rect + fill/stroke ise aynı kutuyu çizer fakat kodun okunabilirliği ve gelecekte aynı path’e kenar efekti (ör. kesik kontur veya clip) ekleme esnekliği farklıdır. Kural: düz grid, blok harita, basit düğme zeminleri → kısayol; seçim çerçevesi hem dolu hem konturlu ve aynı geometri üzerinde birden fazla işlem → path.

Kısayollar bağlamın mevcut fillStyle / strokeStyle değerlerini okur; dolayısıyla bir yardımcı fonksiyon «sadece grid çizer» diyorsa renk parametresi geçmeden önce stil set eden çağıran kod sorumludur — aksi halde önceki modülün rengi sızar. Bu ayrım Stroke vs fill sayfasındaki stil disipliniyle örtüşür; burada vurgu, şekil API seçimidir.

Son olarak, döndürülmüş veya eğik dikdörtgen kısayol ile gelmez; rotate veya genel matris altında fillRect hâlâ eksen paralel bir kutu üretir — sadece dönük görünür. Eğik «elmas» panel istiyorsanız path veya çokgen gerekir (eğri değilse dört lineTo yeter).

Dikdörtgenler: fillRect, strokeRect ve clearRect

Üç fonksiyon da axis-aligned dörtgene indirgenebilir. fillRect opak veya yarı saydam katman için; strokeRect ince çerçeve veya ızgara çizgisi için; clearRect ise piksel buffer’ını şeffaf veya varsayılan arka plana döndürmek için kullanılır — sonuncusu fill/stroke değildir, doğrudan silme işlemidir ( Clear & redraw ).

Negatif genişlik veya yükseklik, dikdörtgeni sola veya yukarı doğru genişletir; slot tabanlı layout hesaplarında yararlıdır. Üst üste binen dolgular birleşim sırasına göre birikir; bu yüzden «önce koyu zemin, sonra yarı saydam vurgu» gibi katman sırasını bilinçli tutun — composite modlarını istisnai tutmak Composite operations sayfasına bırakılır.

strokeRect çağrısından sonra path durumu hakkında yanlış varsayım yapmayın: tarayıcı içeride geçici path kullanır; kendi beginPath zincirinizle karışmaması için kritik çizim blokları arasında path’i açıkça sıfırlamak Path · beginPath disiplinine uyar.

function drawChessBackdrop(ctx, cell, cols, rows) {
  ctx.fillStyle = 'rgba(255,255,255,0.06)';
  for (let y = 0; y < rows; y++) {
    for (let x = 0; x < cols; x++) {
      if ((x + y) % 2 === 0) continue;
      ctx.fillRect(x * cell, y * cell, cell, cell);
    }
  }
}

RoundRect: yuvarlatılmış kart ve tek yarıçap

roundRect(x, y, w, h, radii) mevcut path’e bağlı olarak yuvarlatılmış dikdörtgen konturu ekler; ardından fill veya stroke ile tamamlanırsınız. Tek sayı verilirse dört köşe aynı yarıçapı paylaşır; dizi veya nesne ile köşe başına farklı yarıçap tanımlanabilir — tasarımda «üst geniş radius, alt sıkı» HUD panellerinde sık tercih edilir.

Yuvarlak köşeli kartın görsel sırası Stroke vs fill · sıra bölümüyle uyumludur: çoğu arayüz önce gövde dolgusu, sonra ince kenarlık çizer. Tarayıcı desteği kritik ise üretim kodunda özellik tespiti veya köşeleri yay + line ile manuel yaklaşım gerekebilir; bu sayfa API sözleşmesini sabitler, polyfill seçimi projeye bağlıdır.

Clip maskesi olarak da kullanılabilir: beginPath → roundRect → clip — görüntünün köşeli taşması engellenir; maske sonra State · clip dalında kapatılır.

function drawRoundedPanel(ctx, x, y, w, h, r) {
  ctx.beginPath();
  ctx.roundRect(x, y, w, h, r);
  ctx.fillStyle = 'rgba(18, 24, 34, 0.92)';
  ctx.fill();
  ctx.strokeStyle = '#2ee7f2';
  ctx.lineWidth = 2;
  ctx.stroke();
}

Daire ve elips: arc, yay ve yüz yüzeyi

Tam dolu daire: beginPath → arc(cx, cy, r, 0, Math.PI * 2) → fill. İnce halka: yay + stroke — dolgu gerektirmez. «Pasta dilimi» yüzdesi için başlangıç ve bitiş açılarını radyan olarak beslersiniz; UI göstergelerinde -Math.PI / 2 ile 12-yönünden başlatmak sık seçilir. Yay, path’te önceki noktaya otomatik segment eklemez; komşu segmentlerden kaçınmak için uygun moveTo gerekebilir ( Path · arc ).

ellipse, yarı eksenleri ve opsiyonel dönüş açısı ile tek çağrıda oval üretir; oyuncu status balonu veya elips seçim alanı için uygundur. Elips ile daire fill’i özdeşleşmez — yan eksen sıfırsa veya iki yarı eksen eşitse görsel olarak dairedir.

Büyük yaylı sahnede çok sayıda daire kümesi tek kare içinde yüzlerce primitive demektir — bu yüzden aynı parametreleri tekrar eden bileşenlerde Path2D önbelleği veya daha az karmaşık görsel için kısmen drawImage önbelleği değerlendirilebilir; ikincisi bitmap çözümüdür ve bu başlıkta yalnızca hatırlatma olarak yer alır.

Gradyan ve desen: şekille hizalı boya kaynağı

createLinearGradient ve createRadialGradient bağlam nesnesinden türetilir; duraklar (addColorStop) ile gövdeden kenara sıcak-soğuk geçiş verilir. Önemli ayrıntı: gradyanın başlangıç ve bitiş noktaları bağlam koordinatlarındadır — şekli translate ile taşıdıysanız gradyanı da aynı dalda tanımlamak veya taşıma sonrası koordinatları yeniden hesaplamak gerekir; aksi halde panel kayarken renk bandı sabit kalır.

Düğme veya bar şekli için tipik desen: gradyanı oluştur, fillStyle ata, sonra roundRect veya fillRect ile doldur. Radyal gradyan vurgu ışığı, portre çerçevesi veya lens parlaması için kullanılır; merkez ve yarıçapları şekil sınırlarına göre ayarlanır.

createPattern(image, repetition) döşeme ve dokulu yüzey sağlar; görüntünün yüklendiğinden emin olun — yüklenmemiş pattern şeffaf veya boş kalabilir. Pattern + stroke nadiren birlikte gerektirir; çoğu arayüz gövdesinde pattern fill yeterli ( 2D context bağlamında stil oluşturmaya daha geniş yer vardır).

function fillChip(ctx, x, y, w, h) {
  const g = ctx.createLinearGradient(x, y, x + w, y + h);
  g.addColorStop(0, '#2ee7f2');
  g.addColorStop(1, '#b56cff');
  ctx.fillStyle = g;
  ctx.beginPath();
  ctx.roundRect(x, y, w, h, 8);
  ctx.fill();
}

Path2D: tekrar çizilen silüet ve ikon fabrikası

Aynı rozet, minimap işaretçisi veya özel çokgen onlarca kez çiziliyorsa geometriyi bir kez Path2D içinde kurup fill(path) / stroke(path) ile tekrar kullanmak CPU’da path komut tekrarını azaltır. Transform her çağrıda uygulanır — path kendisi dünya konumu taşımaz; translate + fill(badge) deseni doğaldır.

SVG path dizesinden new Path2D(d) ile içe aktarım mümkündür; tasarım aracından gelen vektörü canvas’ta tekrar kullanma yoludur. Hit test ( isPointInPath(path, x, y)) için de Path2D kullanılır; detay Path · hit test ile örtüşür.

const diamond = new Path2D();
diamond.moveTo(0, -8);
diamond.lineTo(6, 0);
diamond.lineTo(0, 8);
diamond.lineTo(-6, 0);
diamond.closePath();

function drawMarkerAt(ctx, x, y, fillStyle) {
  ctx.save();
  ctx.translate(x, y);
  ctx.fillStyle = fillStyle;
  ctx.fill(diamond);
  ctx.restore();
}

Metin outlines: fillText ve strokeText

fillText ve strokeText glyph’leri şekil gibi çizer; kontur yazı için ince veya neon hat, dolgu yazı için okunabilir gövde verir. font, textAlign, textBaseline bağlam durumudur ve panel çizimiyle çakışmaması için State · iç içe katman desenine uyar. Metrik ve sarmalama bu sayfanın sınırı dışındadır; burada yalnızca «metin de boyanabilir primitive» olduğu hatırlatılır.

Okunabilir etiket deseni: önce fillText ile ana renk, sonra ince strokeText ile kontrast çerçeve — sıra Stroke vs fill · sıra ile uyumludur; kontur üstte kaldığı için neon veya seçim halkası etkisi netleşir. Ters sıra dolgunun bir kısmını örter; kasıtlı olmadıkça kaçının.

textAlign ve textBaseline, koordinatın hangi noktaya oturacağını belirler; düğme merkezinde başlık için 'center' + 'middle' yaygındır. Yanlış baseline, dikey hizalı kolonlarda bir satırın diğerinden «milim» kaymasına yol açar — aynı panelde metin ve dikdörtgen çizerken baseline sözleşmesini sabitleyin.

maxWidth üçüncü parametresi metni sıkıştırır; otomatik satır kırılmaz — çok satırlı blok ve ölçüm ( measureText) tam yerleşim düzenleri ayrı bir metin konusuna bırakılır. Bu sayfada yalnızca «tek satırlık başlık / sayaç» gibi şekil paketinin parçası olduğunu not ediyoruz.

function drawOutlinedCaption(ctx, x, y, text) {
  ctx.font = '600 13px DM Sans, sans-serif';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.lineWidth = 3;
  ctx.strokeStyle = 'rgba(4,10,18,0.85)';
  ctx.strokeText(text, x, y);
  ctx.fillStyle = '#e8f4ff';
  ctx.fillText(text, x, y);
}

Hizalama, ölçek ve keskin piksel: canvas boyutu ile ilişki

Şekil konumları attribute width/height piksel ızgarasına oturur; CSS ile canvas DOM’u büyütüldüğünde görüntü bulanıklaşabilir (Resize mantığı). İnce çizgili UI ve keskin kutular için bitmap boyutu ile device pixel oranı uyumu ve yarım piksel kaydırması (translate(0.5, 0.5) + integer grid) sık pratikte denenir — detay resize konusundadır; bu başlıkta yalnızca «şekil fonksiyonu çağırmadan önce çözünürlük hazır mı?» sorusunu sabitliyoruz.

Dünya dönüşümü altında kart çizmek yaygındır: mini harita kutusu kamerasından bağımsız kalırken, seçim halo’su dünya ile döner — hangi bileşenin hangi uzayda çizildiğini modül bazında yazmak, ileride hata ayıklamayı kolaylaştırır.

ctx matrisi ile ölçeklenen şekiller piksel ızgarasından uzaklaşır; 1 px çizgiyi keskin tutmak için ya ekran uzayında (sıfırlanmış matris) çizin ya da ölçek sonrası lineWidth telafisi yapın ( Koordinat sistemi ). CSS transform ile canvas öğesini döndürmek tüm bitmap’i «fotoğraf» gibi eğer; içerideki fillRect hâlâ eksen paraleldir — hangi dönüşümün nerede uygulandığını ayırın.

Dikdörtgen ve metinleri aynı hizada tutmak için tamsayı piksel koordinatları tercih edin; sürekli kayan kamera için alt piksel kaçınılmalıdır — HUD sabitliyse yuvarlama kuralları (ör. Math.round) tutarlı kalmalıdır. Piksel snapping tam çözümü resize + koordinat sayfalarının birleşimidir; burada şekil API’si seçerken uyarı çerçevesi yeterli.

Performans düşünümü: toplu rect ve gereksiz state değişimi

Yüzlerce tile için fillRect düşük seviye maliyeti genelde iyidir; gerçek tıkanıklık çoğunlukla her hücrede createLinearGradient oluşturmak veya gereksiz save/restore fırtınasıdır. Gradyanı kare başında veya stil grubu başında bir kez oluşturup yeniden kullanmak daha verimli olabilir — dinamik vurguda ise parametre günceli gerekli.

Aynı fillStyle ile çizilen hücreleri gruplayın: renk değişim sayısı azaldıkça tarayıcı tarafı daha öngörülebilir olur. Zıt strateji — her karede onlarca farklı gradient — mobilde maliyeti artırır; ızgara ve harita katmanlarında «katman başına bir gradyan» veya düz renk sık yeterlidir; istisnai parlaklık Composite operations tarafında düşünülür.

Statik HUD ve dinamik dünya ayrı katmanlara bölündüğünde, sık değişmeyen bileşeni tek sefer çizilmiş bir yüzeye almak mümkündür ( Canvas oluşturma ile çoklu surface düşünümü bazı projelerde kombine edilir); bu sayfa yalnızca «aynı kare içinde» gereksiz tekrardan kaçınmayı işaret eder, mimari seçim projeye kalır.

Aşırı sayıda benzersiz küçük shape (partikül sisi) için canvas yerine tek bir sprite atlası veya WebGL yüz yüzüdür — bu klasör köprüsü başka başlıkta; burada uyarı olarak yalnızca «aynı sahne için API seçimi»nin maliyeti farklılaştığı belirtilir.

Anti-kalıplar: yanlış API, taşan radius ve kör stil

Yuvarlatılmış köşeyi fillRect ile beklemek: Kısayol köşe xırıltısı vermez; roundRect veya path gerekir.

Radius > yarım kenar: Tarayıcı köşe yuvarlamayı kısar; beklenmedik silüet için yarıçapı min(w,h)/2 ile sınırlayın.

Gradyanı taşımadan translate: Renk bandı panelden ayrı kayar; gradyanı dal içinde yeniden tanımlayın veya matrisle uyumlu koordinat kullanın.

Metin stilini unutmak: Bir modül font değiştirip geri almazsa HUD metni bozulur — state disiplini.

Kısayol + path kurgusu: strokeRect veya fillRect sonrası aynı fonksiyonda lineTo ile devam edip «path temiz» varsaymak — örtük path durumu Path · beginPath ile sıfırlanmalıdır.

Pattern yüklenmeden fillStyle: Desen görüntüsü hazır değilse dolgu boş veya tek renk gibi görünür; async varlık yüklemesinde boyamayı görüntü onload sonrasına bağlayın.

strokeRect ile sıkı layout: Kontur dışa taştığı için bitişik kutuların çerçeveleri görsel olarak birleşir — hücre aralığı veya lineWidth düşürme Stroke vs fill · rect ile örtüşür.

Bu sayfanın sınırı

Tam vektör editöründeki karmaşık path operasyonları, boolean birleştirme ve Bézier ara yüzleri Eğri mantığı ve path konularına bölünmüştür. SVG DOM ile canlı bağlantı ve WebGL tessellation bu başlıkta yoktur.

Şekil kısayolu mu gerekiyor, path esnekliği mi?
roundRect sonrası path temiz mi?
Gradyan / pattern koordinatları hangi uzayda?
Metin ve panel aynı save dalında mı; font geri alındı mı?

Sıradaki: dolgu–kontur ayrımını netleştirmek

Şekilleri seçtikten sonra aynı silüeti fill ve stroke ile nasıl boyayacağınız Stroke vs fill sayfasında keskinleşir. Önceki adım: Path sistemi.

Bu sayfada öğrendikleriniz

Kısayol ile path seçimi (1).
Dikdörtgen ailesi (2).
roundRect kart (3).
Daire ve elips (4).
Gradyan ve desen (5).
Path2D tekrar kullanımı (6).
Metin outlines (7).
Hizalama ve çözünürlük köprüsü (8).
Performans düşünümü (9).
Anti-kalıplar (10).

Çizim & path okuma sırası

Sıradaki konular

Bu sayfa HTML5 Canvas 2D’de yaygın şekil primitive’leri ve bunları stille paketlemenin seçim kurallarını sabitler; keskin dolgu/kontur ayrımı bir sonraki adımdadır.