Atölye › Satranç › 7/48. adım

Beyaza bir dış çizgi

Ne yapıyoruz

Beyaz taşlar açık karelerde kayboluyor. Onlara koyu bir dış çizgi çizeceğiz: strokeText, yazının yalnız kenarını çizer.

Sıra önemli: çizgi önce, beyaz dolgu sonra. Canvas'ta sonra çizilen öncekinin üstüne gelir; 3 piksellik kalın çizgi sonra gelseydi sembolün ince yerlerini kapatırdı.

```js
        ctx.textBaseline = 'middle'
        // White pieces get a dark outline, drawn first so the white fill goes on top of it.
        if (piece[0] === 'w') {
          ctx.strokeStyle = '#0f172a'
          ctx.lineWidth = 3
          ctx.strokeText(GLYPHS[piece[1]], x + SQ / 2, y + SQ / 2 + 3)
        }
        ctx.fillStyle = piece[0] === 'w' ? '#f8fafc' : '#0f172a'
```

Ne işe yarıyor

if (piece[0] === 'w') { → yalnız beyaz taşlar için.
ctx.strokeStyle = '#0f172a' → çizgi rengi (dolgu rengi fillStyle'dan ayrıdır).
ctx.lineWidth = 3 → çizgi kalınlığı: 3 piksel.
ctx.strokeText(...) → sembolün yalnız dış hattını çizer; yeri fillText ile aynı, böylece dolgu tam üstüne oturur.

Sıra sende

draw içinde ctx.textBaseline = 'middle' satırının altına, ctx.fillStyle = piece[0] === ... satırının üstüne yorum satırını ve if bloğunu yaz.
Çalıştır: beyaz taşlar artık koyu kenarlı ve net görünmeli.

Beceriler: Canvas üzerine çizim

← Taşları çiz Tekrar tekrar çiz →

Beyaza bir dış çizgi

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar