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

Sıradaki ders: Yol ve çizgiler

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler