JavaScript Academy · Ders

Görüntüler ve Metinlerle Çalışma

Canvas üzerinde görüntüler ve stillendirilmiş metinler çizin.

Görüntüler ve Metinlerle Çalışma, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 3. 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.

Görüntü Yükleme

Canvas, bir HTMLImageElement üzerinden çizim yapar. Bir görüntü oluşturun, kaynağını ayarlayın ve çizim yapmadan önce onload olayını bekleyin; pikseller bu zamana kadar kullanılabilir değildir.

const img = new Image();
img.onload = () => ctx.drawImage(img, 0, 0);
img.src = "/logo.png";

drawImage Temelleri

drawImage(img, dx, dy), görüntüyü doğal boyutunda belirtilen konuma çizer.

img.onload = () => {
  ctx.drawImage(img, 20, 20);
};

Görüntüleri Ölçeklendirme

Beş bağımsız değişken alan biçim olan drawImage(img, dx, dy, dWidth, dHeight), görüntüyü hedef bir kutuya sığacak şekilde ölçeklendirir.

ctx.drawImage(img, 0, 0, 160, 90); // fit into 160x90

Kaynak Dikdörtgeniyle Kırpma

Dokuz bağımsız değişken alan biçim kırpma yapmanızı sağlar: drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight). İlk dört değer kaynak dilimini tanımlar.

ctx.drawImage(img, 0, 0, 50, 50, 10, 10, 100, 100); // crop 50x50 → scale to 100x100

Dolgulu Metin Çizme

fillText(text, x, y), metni fillStyle kullanarak boyar. Varsayılan olarak y değeri metnin taban çizgisidir.

ctx.fillStyle = "#2c3e50";
ctx.font = "24px sans-serif";
ctx.fillText("Hello Canvas", 20, 50);

Dış Çizgili Metin

strokeText(text, x, y), yalnızca dış çizgiyi strokeStyle ve lineWidth kullanarak çizer.

ctx.font = "40px bold serif";
ctx.lineWidth = 2;
ctx.strokeStyle = "navy";
ctx.strokeText("Outline", 20, 80);

font Özelliği

font, CSS kısaltma söz dizimini izler: [style] [weight] size family. Boyut ve aile zorunludur.

ctx.font = "italic bold 28px Georgia, serif";

Metin Hizalama

textAlign (start/end/left/right/center) yatay sabitlemeyi, textBaseline (top/middle/alphabetic/bottom) ise verilen noktanın çevresindeki dikey sabitlemeyi ayarlar.

ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("Centered", canvas.width / 2, canvas.height / 2);

Metni Ölçme

measureText(text), bir TextMetrics nesnesi döndürür. Nesnenin width özelliği, metnin çizildiğinde ne kadar geniş olacağını gösterir; bu, yerleşim ve satır kaydırma için gereklidir.

const m = ctx.measureText("How wide?");
console.log(m.width); // pixels

Basit Satır Kaydırma

Uzun dizeleri satırlara ayırmak için measureText ile bir döngüyü birleştirin.

function wrap(ctx, text, x, y, maxW, lh) {
  let line = "";
  for (const word of text.split(" ")) {
    const test = line + word + " ";
    if (ctx.measureText(test).width > maxW && line) {
      ctx.fillText(line, x, y);
      line = word + " ";
      y += lh;
    } else {
      line = test;
    }
  }
  ctx.fillText(line, x, y);
}

Derinlik İçin Gölgeler

Gölge özellikleri şekillere, görüntülere ve metinlere uygulanır: shadowColor, shadowBlur, shadowOffsetX/Y.

ctx.shadowColor = "rgba(0,0,0,0.4)";
ctx.shadowBlur = 8;
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.fillText("With shadow", 20, 60);

Kısa Kontrol

Görüntü ve metin çizimini ne kadar anladığınızı sınayın.

Özet: Görüntüler ve Metin

Görüntüleri yüklemeyi, drawImage aracılığıyla ölçeklendirip kırparak çizmeyi, fillText/strokeText ile metin oluşturmayı, font ayarlamayı, metni hizalamayı, measureText ile genişlikleri ölçmeyi ve gölgeler eklemeyi öğrendiniz. Sırada animasyon var.

Sıkça Sorulan Sorular

“Görüntüler ve Metinlerle Çalışma” dersi ücretsiz mi?

Evet — “Görüntüler ve Metinlerle Çalışma” 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.

“Görüntüler ve Metinlerle Çalışma” dersinde ne öğreneceğim?

Canvas üzerinde görüntüler ve stillendirilmiş metinler çizin. 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 3. dersidir.

“Görüntüler ve Metinlerle Çalışma” 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