HTML Academy · Ders

Canvas ve 2B Bağlamı Ayarlama

Bir canvas öğesi oluşturun ve 2B görüntüleme bağlamını edinin

Canvas ve 2B Bağlamı Ayarlama, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 1. 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.

canvas Öğesi

<canvas> öğesi, tarayıcıda çizim yapılabilen bir bitmap yüzeyidir:

<canvas id="myCanvas" width="800" height="400">
  <!-- Fallback for browsers without canvas support -->
  <p>Your browser does not support HTML5 Canvas.</p>
</canvas>

Genişlik ve Yükseklik Öznitelikleri

canvas boyutlarını her zaman CSS yerine HTML öznitelikleriyle ayarlayın:

<!-- CORRECT: set intrinsic size via attributes -->
<canvas width="800" height="400"></canvas>

<!-- WRONG: CSS changes display size but not canvas resolution -->
<canvas style="width: 800px; height: 400px;"></canvas>
<!-- This stretches a default 300x150 canvas to 800x400
     Result: blurry graphics -->

2D Bağlamını Alma

Çizim yapmak için 2D oluşturma bağlamını alın:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// ctx is a CanvasRenderingContext2D object
// All drawing operations are methods on ctx

// Check browser support:
if (!canvas.getContext) {
  console.error('Canvas not supported');
}

Koordinat Sistemi

canvas koordinat sistemi sol üstten başlar:

// (0, 0) = top-left corner
// (width, 0) = top-right
// (0, height) = bottom-left
// (width, height) = bottom-right

// For a 800x400 canvas:
// x increases left → right (0 to 800)
// y increases top → bottom (0 to 400)
//
// Example: draw at center:
ctx.fillRect(400, 200, 10, 10);  // centered dot

canvas Durumu

canvas, kaydedilip geri yüklenebilen bir çizim durumuna sahiptir:

ctx.save();       // push current state onto a stack

// Change state:
ctx.fillStyle = 'red';
ctx.globalAlpha = 0.5;

// Draw with modified state...
ctx.fillRect(100, 100, 200, 200);

ctx.restore();    // pop state: back to pre-save settings

canvas'ı Temizleme

Yeniden çizimden önce (animasyon için) canvas'ın tamamını temizleyin:

// Clear entire canvas:
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Or with a background color:
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);

fillStyle ve strokeStyle

Doldurma ve çizgi işlemleri için renkleri ayarlayın:

ctx.fillStyle = 'blue';                    // CSS color name
ctx.fillStyle = '#ff6600';                 // hex color
ctx.fillStyle = 'rgb(255, 100, 0)';       // rgb
ctx.fillStyle = 'rgba(255, 100, 0, 0.5)'; // rgba with alpha
ctx.fillStyle = gradient;                  // gradient object
ctx.fillStyle = pattern;                   // pattern object

ctx.strokeStyle = '#333333';               // border color

lineWidth ve Diğer Stil Özellikleri

Çizgi ve hat stili özellikleri:

ctx.lineWidth = 4;           // stroke width in pixels
ctx.lineCap = 'round';       // butt | round | square
ctx.lineJoin = 'round';      // miter | round | bevel
ctx.setLineDash([5, 3]);     // dashed line: 5px dash, 3px gap
ctx.globalAlpha = 0.8;       // transparency for all drawing
ctx.globalCompositeOperation = 'multiply'; // blend modes

Duyarlı HiDPI canvas

Retina/HiDPI ekranlarda bulanık canvas sorununu giderin:

function setupHiDPI(canvas, width, height) {
  const dpr = window.devicePixelRatio || 1;
  canvas.width = width * dpr;
  canvas.height = height * dpr;
  canvas.style.width = width + 'px';
  canvas.style.height = height + 'px';
  const ctx = canvas.getContext('2d');
  ctx.scale(dpr, dpr);  // scale all drawing
  return ctx;
}

Canvas ile SVG Karşılaştırması

canvas ile SVG arasında ne zaman seçim yapılacağı:

Canvas — bitmap, piksel piksel işleme; oyunlar, büyük veri görselleştirmeleri ve görüntü işleme için idealdir
SVG — vektörel ve ölçeklenebilirdir; logolar, simgeler, etkileşimli öğelere sahip grafikler ve erişilebilirlik için idealdir

canvas Erişilebilirliği

canvas yerleşik erişilebilirlik sunmaz; bunu elle ekleyin:

<canvas
  id="chart"
  width="800"
  height="400"
  aria-label="Bar chart showing Q1-Q4 revenue growth"
  role="img"
>
  <!-- Fallback for non-canvas browsers and screen readers -->
  <table><!-- accessible data table --></table>
</canvas>

Hızlı Kontrol

Bir canvas çizim bağlamını almanın doğru yolu nedir?

Tekrar: Canvas Kurulumu

Canvas kurulumu için temel noktalar:

Genişlik ve yüksekliği CSS yerine HTML öznitelikleriyle ayarlayın
canvas.getContext('2d') — çizim bağlamını alın
Başlangıç noktası sol üst köşedir (0,0); x→sağa, y→aşağı ilerler
ctx.save() / ctx.restore() — yığın tabanlı durum yönetimi
Net Retina görüntüsü için devicePixelRatio oranında ölçeklendirin

Sıkça Sorulan Sorular

“Canvas ve 2B Bağlamı Ayarlama” dersi ücretsiz mi?

Evet — “Canvas ve 2B Bağlamı Ayarlama” 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.

“Canvas ve 2B Bağlamı Ayarlama” dersinde ne öğreneceğim?

Bir canvas öğesi oluşturun ve 2B görüntüleme bağlamını edinin 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 1. dersidir.

“Canvas ve 2B Bağlamı Ayarlama” 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