JavaScript Academy · Ders

Canvas Bağlamını Ayarlama

2B işleme bağlamını alın ve yapılandırın.

Canvas Bağlamını Ayarlama, CoddyKit'te ücretsiz bir JavaScript 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, 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.

Canvas API'si Nedir?

Canvas API'si, JavaScript kullanarak bir <canvas> öğesine 2B grafikler çizmenizi sağlar. Piksellerden oluşan bir çizim yüzeyi ve şekilleri, görüntüleri ve metinleri boyamak için bir dizi komut elde edersiniz.

İşaretleme, tek bir <canvas> etiketinden oluşur.
Tüm çizimler, JavaScript aracılığıyla bir bağlam nesnesi üzerinden gerçekleştirilir.

<canvas id="board" width="320" height="200"></canvas>

Bağlamı Alma

Bir CanvasRenderingContext2D elde etmek için canvas öğesinde getContext('2d') çağrısını yapın. Her çizim komutu bu nesne üzerinden gerçekleştirilir.

const canvas = document.getElementById("board");
const ctx = canvas.getContext("2d");
console.log(ctx.constructor.name); // CanvasRenderingContext2D

Koordinat Sistemi

Başlangıç noktası (0, 0), sol üst köşedir. X sağa doğru, Y aşağı doğru büyür. 320x200 boyutundaki bir canvas'ın sağ alt köşesi (320, 200) noktasındadır.

Genişlik ve Yükseklik Öznitelikleri

width ve height HTML öznitelikleri, piksel cinsinden çizim tamponunun boyutunu ayarlar. Belirtilmezlerse varsayılan değerleri 300x150 olur. Bunları JS içinde ayarlamak canvas'ı da temizler.

const canvas = document.getElementById("board");
canvas.width = 400;
canvas.height = 300;
console.log(canvas.width, canvas.height); // 400 300

CSS Boyutu ve Tampon Boyutu Karşılaştırması

CSS width/height değerleri canvas'ı ekranda esnetir, ancak piksel tamponunu değiştirmez. Bu değerler özniteliklerden farklıysa çizimler bulanık veya esnemiş görünür. Net bir çıktı için ikisini eşit tutun.

canvas.width = 400;  // buffer pixels
canvas.style.width = "400px"; // display size — match it

Yüksek DPI Ekranlarını Yönetme

Retina ekranlarda devicePixelRatio değeri genellikle 2 olur. Çizgilerin keskin kalması için tamponu büyütün ve bağlamı küçültecek şekilde ölçeklendirin.

const dpr = window.devicePixelRatio || 1;
canvas.width = 400 * dpr;
canvas.height = 300 * dpr;
canvas.style.width = "400px";
canvas.style.height = "300px";
ctx.scale(dpr, dpr);

Dolgu ve Çizgi Stillerini Ayarlama

Çizim durumu bağlam üzerinde tutulur. fillStyle dolgu rengini, strokeStyle ise dış çizgi rengini ayarlar. Bu özellikler her CSS renk dizesini kabul eder.

ctx.fillStyle = "#3498db";
ctx.strokeStyle = "rgba(231, 76, 60, 0.8)";
ctx.lineWidth = 4;

İlk Çiziminiz

Bağlam hazır olduğunda hemen çizim yapabilirsiniz. fillRect(x, y, w, h), geçerli fillStyle değerini kullanarak içi dolu bir dikdörtgen çizer.

const ctx = document.getElementById("board").getContext("2d");
ctx.fillStyle = "tomato";
ctx.fillRect(20, 20, 150, 80);

Canvas'ı Temizleme

clearRect(x, y, w, h), dikdörtgen bir bölgeyi silerek saydam hâle getirir. Her animasyon karesinde tüm tamponu temizlemek, genellikle ilk adımdır.

ctx.clearRect(0, 0, canvas.width, canvas.height);

Durumu Kaydetme ve Geri Yükleme

save(), geçerli stil ve dönüşümü bir yığına ekler; restore() ise bunları geri alır. Bu yöntem geçici değişiklikleri birbirinden izole eder.

ctx.save();
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 50, 50);
ctx.restore(); // fillStyle reverts to previous value

Özellik Algılama

Kullanmadan önce getContext özelliğinin varlığını kontrol ederek çok eski tarayıcılara karşı önlem alın.

const canvas = document.getElementById("board");
if (canvas.getContext) {
  const ctx = canvas.getContext("2d");
  // safe to draw
} else {
  console.log("Canvas not supported");
}

Kısa Kontrol

Canvas kurulumunu ne kadar anladığınızı sınayın.

Özet: Canvas Kurulumu

Canvas'ı almayı, getContext('2d') çağrısını yapmayı, sol üst başlangıç noktasını anlamayı, tampon ve CSS boyutlarını ayarlamayı, devicePixelRatio ile yüksek DPI'ı yönetmeyi ve fillStyle/strokeStyle yapılandırmayı öğrendiniz. Sırada şekiller ve yollar var.

Sıkça Sorulan Sorular

“Canvas Bağlamını Ayarlama” dersi ücretsiz mi?

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

“Canvas Bağlamını Ayarlama” dersinde ne öğreneceğim?

2B işleme bağlamını alın ve yapılandırın. 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 1. dersidir.

“Canvas Bağlamını 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 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