JavaScript Academy · Lektion

Mit Bildern und Text arbeiten

Zeichnen Sie Bilder und formatierten Text auf dem Canvas.

Mit Bildern und Text arbeiten ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Ein Bild laden

Canvas zeichnet aus einem HTMLImageElement. Erstellen Sie ein Image, setzen Sie dessen src und warten Sie auf onload, bevor Sie zeichnen – die Pixel sind vorher nicht verfügbar.

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

Grundlagen von drawImage

drawImage(img, dx, dy) zeichnet das Bild an der angegebenen Position in seiner natürlichen Größe.

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

Bilder skalieren

Die Form mit fünf Argumenten, drawImage(img, dx, dy, dWidth, dHeight), skaliert das Bild in einen Zielbereich.

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

Mit einem Quellrechteck zuschneiden

Mit der Form mit neun Argumenten können Sie zuschneiden: drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight). Die ersten vier Argumente beschreiben den Ausschnitt aus der Quelle.

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

Ausgefüllten Text zeichnen

fillText(text, x, y) zeichnet Text mit fillStyle. Das y ist standardmäßig die Textgrundlinie.

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

Text mit Kontur

strokeText(text, x, y) zeichnet nur die Kontur mit strokeStyle und lineWidth.

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

Die font-Eigenschaft

font folgt der CSS-Kurzschreibweise: [style] [weight] size family. Größe und Schriftfamilie sind erforderlich.

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

Textausrichtung

textAlign (start/end/left/right/center) legt die horizontale Verankerung fest; textBaseline (top/middle/alphabetic/bottom) legt die vertikale Verankerung relativ zum angegebenen Punkt fest.

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

Text messen

measureText(text) gibt ein TextMetrics-Objekt zurück. Sein width gibt an, wie breit der Text gerendert wird – unerlässlich für Layout und Zeilenumbruch.

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

Einfacher Zeilenumbruch

Kombinieren Sie measureText mit einer Schleife, um lange Zeichenfolgen auf mehrere Zeilen zu verteilen.

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);
}

Schatten für mehr Tiefe

Schatteneigenschaften gelten für Formen, Bilder und Text: 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);

Kurzer Test

Testen Sie das Zeichnen von Bildern und Text.

Zusammenfassung: Bilder und Text

Sie haben gelernt, Bilder zu laden und sie mit drawImage zu skalieren und zuzuschneiden, Text mit fillText/strokeText zu zeichnen, font festzulegen, Text auszurichten, Breiten mit measureText zu messen und Schatten hinzuzufügen. Als Nächstes geht es um Animationen.

Häufig gestellte Fragen

Ist die Lektion „Mit Bildern und Text arbeiten“ kostenlos?

Ja — der vollständige Text von „Mit Bildern und Text arbeiten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Mit Bildern und Text arbeiten“?

Zeichnen Sie Bilder und formatierten Text auf dem Canvas. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Mit Bildern und Text arbeiten“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy