Stroke vs fill: dolgu, kontur ve boyama sözleşmesi

Path sistemi sayfasında vurgulandığı gibi path tek başına ekrana yazılmaz. fill tarayıcıya «bu alt yolların içinde kalan pikselleri fillStyle ile boya» der; stroke ise «path’in orta hattı boyunca lineWidth kalınlığında bir şerit çiz» der. Aynı dikdörtgen path’i hem dolgu hem kontur alabilir — UI kartında koyu gövde + ince neon çerçeve tam bu desendir.

Dolgu, alan doldurma problemidir: çokgen içi, daire diski, karmaşık silüet. Kontur, çizgi problemidir: kenar vurgusu, grafik eksenleri, seçim kutusu. Oyun sprite’ında gövde genelde fill (veya drawImage), seçili birim çerçevesi stroke ile çizilir. İkisini karıştırmak — örneğin içi boş bir daire için yalnızca stroke bekleyip fill çağırmak — «içi dolu daire» yerine «halka» üretir; tersine yalnızca fill ile ince kenarlık elde edilemez, kenar için stroke veya üst üste ikinci path gerekir.

clip() path’ten mask üretir; dolgu veya kontur değildir fakat aynı path tanımından sonra gelir. Maskeli çizim State · clip ile birlikte yönetilir; bu sayfada yalnızca «clip, fill/stroke öncesi veya sonrası hangi katmanda?» sorusunu hatırlatıyoruz: genelde önce clip dalı, sonra dal içinde normal fill/stroke.

fillStyle ve strokeStyle birbirinden bağımsızdır; biri kırmızı dolgu, diğeri mavi kontur mümkündür. İkisi de CSS renk dizesi ('#2ee7f2', 'rgba(...)'), CanvasGradient veya CanvasPattern kabul eder. Gradyan ve desen oluşturma 2D context ve Şekil çizimi sayfalarında genişler; burada kural şudur: gradyan koordinatları bağlam uzayındadır — path’i translate ettiyseniz gradyan da o uzayda tanımlanmalıdır, aksi halde kaymış dolgu görürsünüz.

Stil ataması path kurmadan önce veya sonra yapılabilir; boyama anında bağlamdaki güncel değer okunur. Modül «sadece kontur çizer» diyorsa yalnızca strokeStyle set etmesi yeterli; fakat fillStyle’ı bilmeden başka modülün dolgusunu kirletmemek için save/restore kullanın. globalAlpha hem dolgu hem kontura çarpan üst sınırdır; alfa sızıntısı state sayfasındaki disiplinle aynı şekilde kesilir.

lineWidth piksel cinsinden kalınlıktır; varsayılan 1. Kontur path’in orta eksenine simetrik yayılır — yarısı içeri, yarısı dışarı. Dar bir dikdörtgeni kalın stroke ile çizerseniz köşeler birbirine girer; bu stroke’un alan doldurması değil, çizgi şeridi olmasıdır. Dönüşüm matrisi ölçekliyorsa lineWidth de ölçeklenir: dünya uzayında sabit kalın çizgi istiyorsanız save → setTransform(1,0,0,1,0,0) → stroke → restore veya ters ölçek hesabı gerekir ( Koordinat sistemi).

miterLimit keskin köşelerde sivri uçların taşmasını sınırlar; lineJoin ('miter', 'round', 'bevel') köşe birleşimini belirler; lineCap ('butt', 'round', 'square') açık path uçlarını şekillendirir. Açık polyline’da yalnızca stroke anlamlıdır; uç stili burada görünür. Dolguda bu özellikler etkisizdir.

fill() geçerli path’teki alt yolları doldurur. Kapalı kontur ( closePath veya ilk noktaya dönüş) dolgu sınırını netleştirir. Açık path’te tarayıcı sanal bir kapanış segmenti ekleyerek doldurur — sonuç bazen beklenmediktir; üretimde açık polyline’ı fill ile boyamak yerine bilinçli kapatın veya yalnızca stroke kullanın.

fillRule bağlamda 'nonzero' (varsayılan) veya 'evenodd' olabilir; delikli harf «O» veya iç içe halkalar için kritiktir. Kural detayı Path · dolgu kuralı bölümünde; burada sonuç: yanlış kural seçimi dolgunun tersine dönmesidir. Overload fill(path, fillRule) ve fill(path) ile Path2D de doldurulur — path nesnesi bağlam path’ini değiştirmez.

Yarı saydam fillStyle ile üst üste dolgular birleşir; bu, composite modundan önce «kaynak üzerine normal alpha» davranışıdır. Özel blend için Composite operations sayfasına geçilir; burada yalnızca «çok katmanlı yarı saydam panel»de sıra ve alfa birikimini hesaba katın.

stroke() path boyunca şerit çizer; içi boş daire için tam tur arc + stroke yeterlidir, fill gerekmez. İnce progress halkası: küçük yay + kalın lineWidth + yuvarlak lineCap: 'round' kombinasyonu sık kullanılır. Tek noktada «görünür» stroke için en az iki farklı nokta veya sıfır uzunlukta segment + uygun lineCap gerekir — yalnızca moveTo stroke üretmez.

stroke(path) overload’ı Path2D ile çalışır. Kesik çizgi: setLineDash([uzunluk, boşluk]) ve lineDashOffset animasyonlu çizgiler için kullanılır; dash örüntüsü kontur boyunca tekrarlanır, dolguyu etkilemez. Karmaşık dash senaryolarında path uzunluğu ve ölçek birlikte test edilmelidir.

fillRect(x, y, w, h) ve strokeRect(x, y, w, h) dahili olarak path oluşturup hemen boyar; sonrasında «geçerli path» beklediğiniz kodla karışabilir — kritik bölümden sonra beginPath ile temizleyin. Grid, arka plan şeridi ve hizalama kılavuzları için kısayol idealdir; yuvarlatılmış köşe veya döndürülmüş kutu için path tabanlı rect + fill/stroke veya Şekil çizimi gerekir.

Kısayollar mevcut çizgi stilini ve dolgu stilini okur — fillStyle ve strokeStyle sırasıyla. Dönüşüm matrisi uygulanmışsa dikdörtgen de o uzayda döner ve ölçeklenir; axis-aligned («eksen paralel») sahne yapısı bozulur. Bu yüzden dünya için kamera translate kullanıp HUD kutularını ise piksel sabitinde tutmak istiyorsanız, blokları iç içe save/restore veya sıfır matris ile çizmek sık seçimdir — detay koordinat sayfasında kalır.

Negatif genişlik veya yükseklik kullanılırsa dikdörtgen sola veya yukarı doğru genişler; matematiksel olarak geçerlidir ve grid döngülerinde hücre başlangıcı + negatif span ile uyumludur. Üst üste binen fillRect çağrıları kompozit ve alfa sırasına göre birikir — tablo gövdesi + vurgulu hücre için aynı kare içinde sıra kritiktir (Composite operations).

clearRect piksel siler, stroke/fill değildir; yeniden çizim döngüsünde arka planı temizlemek için Clear & redraw ile birlikte düşünülür. Şeffaf arka plan hedefliyorsanız clearRect yalnızca opak katmanları siler — önce tam clearRect(0,0,w,h), sonra sırayla bileşenler deseni tutarlı olur.

strokeRect kontur kalınlığının yarısı dikdörtgen dışına taşar — layout hesabında lineWidth payı bırakın. İnce kenarlık + tam hizalı grid ise hücreyi bir miktar içeri daraltmak veya miterLimit ve köşe birleşimini düşük zoom’da gözlemlemek gerekebilir — özellikle kalın kontur iki hücre sınırını «taşarak» görsel olarak birleştirirse.

Aynı path üzerinde hem fill hem stroke çağrılabilir; path tanımı ilk boyamadan sonra silinmez (clip hariç özel durumlar). Klasik UI kartı: beginPath → roundRect / rect → fill() → stroke(). Önce dolgu, sonra kontur genelde doğru sıradır: kontur dolgunun üstünde net kenar verir. Ters sıra (önce stroke, sonra fill) konturu kısmen örter — bazen kasıtlı «içe gömülü» çerçeve efekti için kullanılır, çoğu HUD’da istenmez.

Kalın lineWidth kontur, dolgu sınırının hem içine hem dışına taşar; ince çerçeve + geniş dolgu alanında görsel denge iyidir. İki ayrı path (biraz büyük stroke path + iç fill path) piksel mükemmelliği için ileri seviye çözümdür; basit panellerde tek path + fill → stroke yeterlidir.

Ara renk gerekiyorsa — örneğin çerçevenin iç kenarında parlak hat, ortada yumuşama — önce düz dolgu, sonra ince iç stroke, sonra biraz daha dışarıda ikinci kontur denemesi gibi üç aşama da mümkündür; her katman için stil karmaşası save/restore ile kısılmalıdır. Yarı saydam dolgu kullanılıyorsa üst üste iki stroke, alfa birikimi ile beklenenden daha koyu görünebilir; opak kart gövdesi + tek kontur genelde daha temiz görünür.

stroke uçların ve köşelerin uzantısı ( §3) nedeniyle yuvarlak köşede «hafif köpük» veya fazla parlak köşe üretebilir; seçim kutusu overlay’ında 'round' join/cap seçimi miter’dan daha güvenilirdir. Metin çıkartması ve ikonların üstünde çerçeve çizerken sıra: görsel blok çocuk sırasına göre (arkadan öne); aynı path’te dolgu sonra kontur, çoğu ikon bileşeni için doğru kombinasyon olmaya devam eder.

shadowColor, shadowBlur, shadowOffsetX/Y hem fill hem stroke uygulamasında gölge üretir; performans maliyetlidir. Gölge + özel composite birlikte State · alpha dalında sınırlandırılmalıdır. Kesik çizgi yalnızca kontura uygulanır; dolgulu alanlar düz kalır.

setLineDash ve lineDashOffset seçimi (bkz. §5) seçim kutuları ve debug overlay’leri için kullanılır; animasyonda offset’i kare zamanına bağlamak «koşan» kesik efekti üretir. Dolgu tarafında desen oluşturmak için kesik çizgi değil, fillStyle ile CanvasPattern veya üst üste ince geometri daha uygundur — yoksa yalnızca konturlar hareket eder, yüzey sabit kalır.

Gölgeli bir fill sonra aynı path’te stroke çağırırsanız kontur da gölge parametrelerinden etkilenebilir; tasarımcı sıkça iki dal ister — biri gölgeli düz kart, diğeri gölgesiz ince kenarlık — böylece dış kenar iki kez blur olmaz. Geçişlerde gölgeli dalı save ile kapatıp gölge bayraklarını sıfırlandıran ikinci çağrı netlik kazanır.

isPointInPath dolgu alanında, isPointInStroke kontur bandında hit test yapar — ince çerçeveli butonlarda stroke testi kullanıcı deneyimini iyileştirir. Path tanımı Path · hit test ile örtüşür; burada boyama türüne göre doğru API seçilir.

Karma kontrol örneği: dolu gövde + ince seçim çerçevesi için hem dolgu içi hem çerçeve bandına tıklamanın mantıklı olduğu bölgelerde önce geniş iç alan için isPointInPath, çerçeve bandı için gerektiğinde isPointInStroke ile ikinci doğrulama yapılabilir. Transform uygulanmış bağlamda test koordinatlarının bağlam uzayına dönüşüm gerektirdiği Koordinat sistemi uyarısı geçerlidir.

Path kurmadan fill/stroke: Etkisiz veya önceki path’i boyar — her fonksiyonda beginPath + geometri + boyama zinciri.

Kısayol + path karmaşası: Ardışık fillRect sonrası lineTo ile bağlanmış segmentler oluşması için path’te yeni segmentler varmış gibi kod yazmayın — kısayol path’i örtük kurar ve bırakır; kritik bileşenden sonra beginPath.

fill bekleyip stroke görünümü: İçi boş halka için stroke şart; dolgu kapalı alan ister.

Çift işlevli kontrol: Yalnızca çerçevesi tıklanabilir kartta hit test hep isPointInStroke; yalnızca iç yüz için isPointInPath — ikisi karıştırılırsa «tişört astarı» gibi yanlış tıklanabilir alanlar çıkar ( §8).

lineWidth ölçek sürprizi: Kamera zoom’unda çizgiler kalınlaşır; HUD çizgisi için ekran uzayında stroke veya ters ölçek.

fillRect sonrası path: Kısayol sonrası beginPath ile path zihniyetini sıfırlayın.

Sıra ve stil sızdırması: Önce dolgu sonra kontur kuralından sapılan modüller, yanlış arka saydamlıkta önce kontur sonra dolgu yapınca seçim halo’sunu «yutar» — sırayı bileşen sözleşmesine yazın ve gerekiyorsa restore ile stil sıfırı garantileyin (§7).

Dolgu ve kontur disiplinini oturttuktan sonra yumuşak kenarlar Eğri mantığı sayfasında; özel piksel birleştirme Composite operations sayfasında derinleşir. Önceki adımlar: Path sistemi, Şekil çizimi.