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

Sıradaki ders: Çizim animasyonu

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler