HTML Canvas
Önceki SVG, keskin ikonları vektör işaretleme veya .svg dosyası olarak koydu. Bu ders canvas’ı tanıtır: JavaScript’in boyadığı boş bitmap kutusu. HTML yalnızca yerleştirir ve boyutlandırır; betikler piksel çizer. Kapsam pratik — öğe + küçük 2D çizim — tam Canvas API, oyun veya WebGL kursu değil.
HTML kursunda neden canvas
Yeni başlayanlar canvas’ı grafik ve mini oyunlarda görür. Bölünme yardımcı olur: HTML öğeye; JS piksele sahiptir. SVG’den sonra canvas diğer yaygın aracı gösterir. Burada getContext("2d") ve fillRect yeter.
Doğrudan yanıt
1) id, width, height ve yedek metinli canvas. 2) JS’de getContext("2d"). 3) fillStyle + fillRect ile çizin. 4) Öznitelikler bitmap çözünürlüğünü ayarlar. 5) İkonlar için SVG; dinamik pikseller için canvas. 6) Yalnızca giriş.
📊 Canvas vs SVG for beginners
| Topic | Canvas | SVG |
|---|---|---|
| Drawing model | Bitmap pixels via JavaScript | Vector shapes in markup (or .svg file) |
| Who paints | Scripts on a 2d (or other) context | Browser renders SVG tree |
| Best beginner fit | Dynamic charts, games, freehand | Icons, logos, sharp UI marks |
| Scales when resized | Can blur if only CSS-stretched | Stays sharp as vectors |
| Accessible naming | Label the canvas; drawings are pixels | alt / aria-label on meaningful graphics |
| This course depth | Element + tiny 2d draw | Embed inline or via img |
Küçücük canvas öğesi
Betiksiz canvas boş bir dikdörtgendir. HTML, betiğin bulması için boyut ve id bildirir.
<canvas id="demo" width="300" height="150">
Your browser does not support canvas drawing.
</canvas>
Kabuğu okumak
- canvas yüzey oluşturur
- width/height bitmap boyutunu ayarlar
- id seçime izin verir
- etiketler arası metin yedektir
- yalnızca CSS esnetmek bulanıklaştırabilir
- SVG’den farklı olarak HTML’de çocuk şekil yok
2D bağlamla dikdörtgen çizmek
Kısa betik boyar. getContext("2d") 2D API’yi döndürür; fillRect dikdörtgen doldurur.
<canvas id="c" width="300" height="150">
Canvas drawing is not available in this browser.
</canvas>
<script>
const canvas = document.getElementById("c");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#248";
ctx.fillRect(20, 20, 120, 80);
</script>
Çizim çağrılarını okumak
- getElementById canvas’ı bulur
- getContext("2d") API’yi açar
- fillStyle rengi ayarlar
- fillRect dikdörtgen doldurur
- betiksiz yalnızca yedek
- sonraki: web storage
Canvas vs SVG seçmek
- Statik keskin logo: SVG
- Sık güncellenen pikseller: canvas
- DOM şekilleri: çoğu zaman SVG
- Piksel bölgesi boyamak: canvas
- Basit rozet: genelde SVG
- WebGL/oyunlar: bu girişin ötesi
Alıştırma — sayfada canvas
- Kabuğu yapıştırın.
- Betiği ekleyin; dikdörtgeni doğrulayın.
- Renk/sayıları değiştirin.
- Betiği geçici kaldırın.
- Yalnızca CSS ile esnetin — bulanıklık olabilir.
- Cümle: canvas JS bitmap’tir; SVG vektör işaretleme.
- İleri: web storage.
Kolay hatalar
- Yalnızca HTML’den şekil beklemek
- Yedek metni unutmak
- SVG daha iyi iken logo için canvas
- Canvas’ı SVG ile karıştırmak
- Yalnızca CSS boyutunu değiştirmek
- Girişi tam Canvas kursu saymak
- Anlam varken canvas’ı adsız bırakmak
Özet
- canvas boş bitmap yüzeydir
- JavaScript getContext("2d") ve fillRect ile çizer
- İkonlar için SVG; dinamik pikseller için canvas
- Yedek metin çizim yokken yardımcı olur
- SVG vektördü; burada betik pikselleri
- Sonraki: HTML web storage
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek