JavaScript Academy · Ders

Şekiller ve Yollar Çizme

Dikdörtgenleri, yayları ve özel yolları işleyin.

Şekiller ve Yollar Çizme, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

Önce Dikdörtgenler

Dikdörtgenler için özel kısayollar vardır: fillRect, strokeRect ve clearRect. Her biri (x, y, width, height) değerlerini alır.

ctx.fillStyle = "#2ecc71";
ctx.fillRect(10, 10, 120, 60);
ctx.strokeStyle = "#000";
ctx.strokeRect(10, 10, 120, 60);

Yol Başlatma

Dikdörtgenler dışındaki her şey için bir yol oluşturursunuz. Yeni bir yol başlatmak için beginPath() çağrısını yapın, parçaları ekleyin ve ardından stroke() veya fill() çağrısını yapın.

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(180, 20);
ctx.stroke();

moveTo ve lineTo

moveTo(x, y), kalemi kaldırıp çizim yapmadan belirtilen konuma götürür. lineTo(x, y), geçerli noktadan yeni noktaya düz bir çizgi çizer.

ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(120, 90);
ctx.lineTo(30, 90);
ctx.stroke();

Yolu Kapatma

closePath(), başlangıç noktasına geri bir çizgi çizerek dış sınırı tamamlar. Çokgenler için kullanışlıdır.

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(100, 130);
ctx.closePath();
ctx.stroke();

Şekilleri Doldurma

fill(), geçerli yolun içini fillStyle ile boyar. Aynı yolu hem doldurabilir hem de çizebilirsiniz.

ctx.beginPath();
ctx.moveTo(100, 20);
ctx.lineTo(160, 120);
ctx.lineTo(40, 120);
ctx.closePath();
ctx.fillStyle = "gold";
ctx.fill();
ctx.stroke();

arc ile Çember Çizme

arc(x, y, radius, startAngle, endAngle), dairesel bir yay çizer. Açılar radyan cinsindendir. Tam bir çember 0'dan 2 * Math.PI değerine kadar çizilir.

ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.fillStyle = "#9b59b6";
ctx.fill();

Kısmi Yaylar ve Pasta Dilimleri

Bir dilim çizmek için başlangıç ve bitiş açılarını kullanın. Pasta dilimi oluşturmak için bunu merkez noktasına uzanan lineTo ile birleştirin.

ctx.beginPath();
ctx.moveTo(100, 75);
ctx.arc(100, 75, 50, 0, Math.PI / 2);
ctx.closePath();
ctx.fill();

İkinci Dereceden ve Bezier Eğrileri

quadraticCurveTo(cpx, cpy, x, y) ve bezierCurveTo(...), kontrol noktalarını kullanarak düzgün eğriler çizer.

ctx.beginPath();
ctx.moveTo(20, 100);
ctx.quadraticCurveTo(100, 10, 180, 100);
ctx.stroke();

Çizgi Biçimlendirme

Çizgi görünümünü lineWidth, lineCap (butt/round/square), lineJoin (miter/round/bevel) ve setLineDash ile denetleyin.

ctx.lineWidth = 6;
ctx.lineCap = "round";
ctx.setLineDash([12, 6]);
ctx.beginPath();
ctx.moveTo(20, 60);
ctx.lineTo(200, 60);
ctx.stroke();

Dolgu Kuralları

fill(), üst üste binen alt yolların nasıl doldurulacağını belirlemek için "nonzero" (varsayılan) veya "evenodd" değerini kabul eder; bu, delikleri olan şekiller için kullanışlıdır.

ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.arc(100, 75, 25, 0, Math.PI * 2);
ctx.fill("evenodd"); // donut

Dolgu Olarak Degradeler

createLinearGradient ile bir degrade oluşturun, renk durakları ekleyin ve ardından bunu fillStyle özelliğine atayın.

const g = ctx.createLinearGradient(0, 0, 200, 0);
g.addColorStop(0, "red");
g.addColorStop(1, "blue");
ctx.fillStyle = g;
ctx.fillRect(0, 0, 200, 100);

Kısa Kontrol

Yollar hakkındaki bilginizi sınayın.

Özet: Şekiller ve Yollar

Artık dikdörtgenler çizebilir, beginPath/moveTo/lineTo/closePath ile yollar oluşturabilir, arc ile çemberler çizebilir, eğriler ekleyebilir, çizgileri biçimlendirebilir ve renklerle ya da degradelerle dolgu yapabilirsiniz. Sırada görüntüler ve metin var.

Sıkça Sorulan Sorular

“Şekiller ve Yollar Çizme” dersi ücretsiz mi?

Evet — “Şekiller ve Yollar Çizme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“Şekiller ve Yollar Çizme” dersinde ne öğreneceğim?

Dikdörtgenleri, yayları ve özel yolları işleyin. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Şekiller ve Yollar Çizme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← JavaScript Academy Sayfasına Dön