Dikdörtgen çizme
fillRect, strokeRect ve clearRect ile dikdörtgen çizmeyi öğrenirsin.
fillRect ile dolu dikdörtgen
fillRect(x, y, genişlik, yükseklik) içi dolu bir dikdörtgen çizer. İlk iki sayı sol üst köşenin konumu, son iki sayı boyutudur.
Dolgu rengini fillStyle özelliği belirler. Renk bir dize olarak yazılır; örneğin 'red' veya '#00ff00'. Renk fillRect çağrısından önce ayarlanmalı, çünkü çizim o anki rengi kullanır.
strokeRect ve clearRect
strokeRect yalnızca dikdörtgenin kenarlığını çizer; içini boş bırakır. Kenarlık rengini strokeStyle ile ayarlarsın.
clearRect ise dikdörtgen bir bölgeyi siler ve şeffaf yapar. Animasyonda her karede önceki çizimi temizlemek için sıkça kullanılır. Üç yöntem de aynı dört argümanı alır: x, y, genişlik, yükseklik.
Uygulama Dolu ve kenarlıklı dikdörtgen
Önce ctx.fillStyle = 'red' ile dolgu rengini kırmızı yap ve ctx.fillRect(10, 10, 60, 40) ile bir dolu dikdörtgen çiz. Sonra ctx.strokeStyle = 'blue' ile kenarlık rengini mavi yap ve ctx.strokeRect(10, 10, 60, 40) ile kenarlıklı dikdörtgeni çiz.
Örnek çözümü göster
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 60, 40);
ctx.strokeStyle = 'blue';
ctx.strokeRect(10, 10, 60, 40);Kendini test et
-
fillStyle ne zaman ayarlanmalıdır?
ctx.fillStyle = 'red'; ctx.fillRect(10, 10, 50, 30);- fillRect çağrısından önce
- fillRect çağrısından sonra
- fillRect ile aynı satırda
- Çizimden sonra otomatik ayarlanır
Cevabı göster
fillRect çağrısından önce — Doğru! fillStyle, fillRect'ten önce ayarlanmalı; çizim o anki rengi kullanır.
-
Dolu dikdörtgen çiz
ctx.____(10, 10, 50, 30);Cevabı göster
ctx.fillRect(10, 10, 50, 30); -
Dikdörtgen yöntemlerini eşleştir
- fillRect
- dolu dikdörtgen
- strokeRect
- kenarlık
- clearRect
- sil
- fillStyle
- dolgu rengi