HTML Academy · Ders

Dikdörtgen ve Yollar Çizme

Şekiller çizmek için fillRect, strokeRect ve yol komutlarını kullanın

Dikdörtgen ve Yollar Çizme, CoddyKit'te ücretsiz bir HTML 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, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

Tuval Kurulumu

<canvas> öğesi, piksel boyutları için açıkça belirtilmiş genişlik ve yükseklik özniteliklerini gerektirir. 2B bağlamı alın: const ctx = canvas.getContext("2d"). Tüm çizim işlemleri bu bağlam nesnesini kullanır.

<canvas id="c" width="800" height="600"></canvas>
const ctx = document.getElementById("c").getContext("2d");

fillRect ve strokeRect

Yollar kullanmadan dikdörtgen çizin: ctx.fillRect(x, y, width, height) içi dolu bir dikdörtgen çizer. ctx.strokeRect(x, y, width, height) dış çizgiyi çizer. Çizimden önce ctx.fillStyle ve ctx.strokeStyle değerlerini ayarlayın.

ctx.fillStyle = "#3b82f6";
ctx.fillRect(50, 50, 200, 100);
ctx.strokeStyle = "#1e3a8a";
ctx.lineWidth = 3;
ctx.strokeRect(50, 50, 200, 100);

Silme için clearRect

ctx.clearRect(x, y, width, height) pikselleri saydam hâle getirerek temizler. Alanları yeniden çizmeden önce silmek için kullanın — animasyon için vazgeçilmezdir: tuvali temizleyin, ardından her karede her şeyi yeni konumlarında yeniden çizin.

Yol Temelleri

Yollar şekilleri tanımlar. Başlatın: ctx.beginPath(). Başlangıç noktasına gidin: ctx.moveTo(x, y). Çizgiler çizin: ctx.lineTo(x, y). Kapatın: ctx.closePath(). Görüntüleyin: ctx.fill() veya ctx.stroke().

Çizgiler Çizme

Bir üçgen: beginPath → moveTo(100,50) → lineTo(200,200) → lineTo(0,200) → closePath → stroke(). closePath, son parçayı başlangıç noktasına geri dönecek şekilde otomatik olarak çizer — ilk koordinatı tekrarlamanız gerekmez.

Yay ve Daire

ctx.arc(cx, cy, radius, startAngle, endAngle). Tam bir daire: ctx.arc(100, 100, 50, 0, Math.PI * 2). Açılar radyan cinsindendir. 0 sağ tarafı (saat 3 konumu), Math.PI ise sol tarafı (saat 9 konumu) gösterir.

Bezier Eğrileri

ctx.quadraticCurveTo(cpx, cpy, x, y), tek kontrol noktasıyla ikinci dereceden bir Bezier eğrisi çizer. ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y), düzgün eğriler için iki kontrol noktasıyla üçüncü dereceden bir Bezier eğrisi çizer.

Dolgu Stilleri

fillStyle; renk dizelerini, doğrusal renk geçişlerini (ctx.createLinearGradient()), radyal renk geçişlerini (ctx.createRadialGradient()) ve desenleri (ctx.createPattern(image, repeat)) kabul eder. Zengin görsel efektler için düz renklerin ötesinde karmaşık dolgular uygulayın.

Çizgi Stilleri

Çizgilerin görünümünü denetleyin: ctx.lineWidth (piksel genişliği), ctx.lineCap ("butt", "round", "square"), ctx.lineJoin ("miter", "round", "bevel") ve dönüşümlü uzunluklara sahip kesikli çizgiler için ctx.setLineDash([5, 3]).

Kaydetme ve Geri Yükleme

ctx.save(), geçerli durumu (fillStyle, strokeStyle, lineWidth, transform, clip) bir yığına ekler. ctx.restore() bu durumu yığından çıkarır. Birbiriyle ilgisiz çizim işlemleri arasında stillerin sızmasını önlemek için karmaşık çizim işlemlerini save/restore ile sarmalayın.

Koordinat Sistemi

Tuvalin başlangıç noktası (0,0), sol üst köşedir. X sağa doğru, Y aşağı doğru artar. Dönüşümler (öteleme, döndürme, ölçekleme) koordinat sistemini değiştirir; böylece mutlak konumları elle hesaplamadan yerel bir başlangıç noktasına göre çizim yapabilirsiniz.

Bilginizi Sınayın

Bir yol çizmeden önce ctx.beginPath() ne yapar?

Özet

Tuval 2B çizimi; dikdörtgenler (fillRect, strokeRect), yollar (beginPath, moveTo, lineTo, arc, bezierCurveTo), stillendirme (fillStyle, strokeStyle, lineWidth) ve durum yönetimi (kaydetme/geri yükleme) için bağlam yöntemlerini kullanır. Bu temel yapı taşlarında ustalaşmak, basit yapı taşlarından karmaşık grafikler oluşturmanızı sağlar.

Sıkça Sorulan Sorular

“Dikdörtgen ve Yollar Çizme” dersi ücretsiz mi?

Evet — “Dikdörtgen 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 HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“Dikdörtgen ve Yollar Çizme” dersinde ne öğreneceğim?

Şekiller çizmek için fillRect, strokeRect ve yol komutlarını kullanın HTML 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.

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

Önceden deneyim gerekmez. CoddyKit'te HTML 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.

“Dikdörtgen 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 HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML 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

← HTML Academy Sayfasına Dön