Atölye › Ritim Şeritleri › 31/35. adım
Şarkı bitince ekranın ortasında bir sonuç kartı çıksın: büyük harfle not, altında doğruluk ve üç sayı. Kartın arkası hafif saydam olacak; arkadaki şeritler belli belirsiz görünsün.
```js
if (state === 'done') {
ctx.fillStyle = 'rgba(15, 23, 42, 0.9)'
ctx.fillRect(40, 170, canvas.width - 80, 170)
ctx.fillStyle = 'white'
ctx.textAlign = 'center'
ctx.font = 'bold 48px sans-serif'
ctx.fillText(grade(), canvas.width / 2, 228)
ctx.font = '16px sans-serif'
ctx.fillText(accuracy() + '% accurate', canvas.width / 2, 262)
ctx.fillText(judged.perfect + ' perfect, ' + judged.good + ' good, ' + judged.miss + ' missed', canvas.width / 2, 288)
ctx.fillText('Space to play again', canvas.width / 2, 318)
}
```if (state === 'done') { → yalnız şarkı bitince. draw'un en sonunda olduğu için her şeyin üstüne çizilir.'rgba(15, 23, 42, 0.9)' → renk kodunun başka bir yazılışı: kırmızı, yeşil, mavi (0-255) ve saydamlık
(0 tam saydam, 1 tam dolu). 0.9 → arkası çok az görünür.ctx.fillRect(40, 170, canvas.width - 80, 170) → soldan ve sağdan 40 piksel içeride, 170 piksel yüksekliğinde bir
kart.ctx.fillText(grade(), ...) → 48 piksellik kocaman harf notu.'80% accurate'), sayılar ('45 perfect, 4 good, 0 missed') ve bir sonraki
adımda çalışacak olan "yeniden oyna" yazısı.draw içinde ctx.fillText('Combo ' ... satırının altına if (state === 'done') bloğunu yaz; fonksiyonun son
}'si altta kalsın. Çalıştır ve şarkıyı sonuna kadar çal (yaklaşık 15 saniye).
Beceriler: Canvas üzerine çizim