Yol ve çizgiler
beginPath, moveTo, lineTo ve stroke ile yol ve çizgi çizmeyi öğrenirsin.
Yol çizimi
Dikdörtgen dışında şekiller çizmek için yol kullanırsın. beginPath yeni bir yol başlatır. moveTo(x, y) kalemi bir noktaya kaldırır (çizmeden götürür), lineTo(x, y) o noktaya kadar çizgi çeker.
Çizgiyi ekrana basmak için stroke çağrılır. Yol, çizilenler listesidir; stroke bu listeyi görünür yapar.
closePath ve stroke
closePath yolu başlangıç noktasına bağlayarak kapatır; böylece kapalı bir şekil oluşur. stroke yolun kenarlarını çizer, fill ise içini doldurur. Kapalı bir yol olmadan fill düzgün çalışmaz.
Üçgen gibi kapalı şekillerde closePath çağırmak, son köşeyi ilk köşeye otomatik bağlar. Renkleri strokeStyle ve fillStyle ile ayarlarsın; ikisi de çizimden önce verilmelidir.
Uygulama Üçgen çiz
Bir üçgen çiz. ctx.beginPath() ile yolu başlat, ctx.moveTo(50, 10) ile kalemi ilk köşeye kaldır, ctx.lineTo(90, 80) ve ctx.lineTo(10, 80) ile iki çizgi çek, ctx.closePath() ile yolu kapat ve ctx.stroke() ile çiz.
Örnek çözümü göster
ctx.beginPath();
ctx.moveTo(50, 10);
ctx.lineTo(90, 80);
ctx.lineTo(10, 80);
ctx.closePath();
ctx.stroke();Kendini test et
-
Çizgi çek
ctx.beginPath(); ctx.moveTo(10, 10); ctx.____(100, 50); ctx.stroke();Cevabı göster
ctx.beginPath(); ctx.moveTo(10, 10); ctx.lineTo(100, 50); ctx.stroke(); -
beginPath yöntemi ne yapar?
- Çizimi anında ekrana basar
- Önceki yolu siler ve ekranı temizler
- Renk ayarlar
- Yeni bir yol başlatır
Cevabı göster
Yeni bir yol başlatır — Doğru! beginPath yeni bir yol başlatır; önceki yol noktalarını temizler.
-
Yol yöntemlerini eşleştir
- beginPath
- yol başlat
- moveTo
- kalemi kaldır
- lineTo
- çizgi çek
- closePath
- yolu kapat