JavaScript Academy · Lektion

Den Canvas-Kontext einrichten

Rufen Sie den 2D-Rendering-Kontext ab und konfigurieren Sie ihn.

Den Canvas-Kontext einrichten ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.

Was ist die Canvas API?

Mit der Canvas API können Sie mit JavaScript 2D-Grafiken in ein <canvas>-Element zeichnen. Sie erhalten eine aus Pixeln bestehende Zeichenfläche sowie eine Reihe von Befehlen, mit denen Sie Formen, Bilder und Text zeichnen können.

Das Markup besteht aus einem einzigen <canvas>-Tag.
Das gesamte Zeichnen erfolgt in JavaScript über ein Kontext-Objekt.

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

Den Kontext abrufen

Rufen Sie getContext('2d') für das Canvas-Element auf, um einen CanvasRenderingContext2D zu erhalten. Jeder Zeichenbefehl wird über dieses Objekt ausgeführt.

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

Das Koordinatensystem

Der Ursprung (0, 0) befindet sich in der oberen linken Ecke. X wächst nach rechts, Y nach unten. Bei einem 320x200-Canvas liegt die untere rechte Ecke bei (320, 200).

Attribute für Breite und Höhe

Die HTML-Attribute width und height legen die Größe des Zeichenpuffers in Pixeln fest. Wenn sie fehlen, ist der Standardwert 300x150. Wenn Sie sie in JavaScript setzen, wird der Canvas ebenfalls gelöscht.

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

CSS-Größe und Puffergröße

CSS-width/height skalieren den Canvas auf dem Bildschirm, ändern aber NICHT den Pixelpuffer. Wenn sie von den Attributen abweichen, wirken Zeichnungen unscharf oder verzerrt. Halten Sie beide Werte synchron, damit die Ausgabe scharf bleibt.

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

High-DPI-Bildschirme behandeln

Auf Retina-Displays ist devicePixelRatio häufig 2. Vergrößern Sie den Puffer und skalieren Sie den Kontext herunter, damit Linien scharf bleiben.

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

Füll- und Konturstile festlegen

Der Zeichenstatus wird im Kontext gespeichert. fillStyle legt die Füllfarbe fest, strokeStyle die Farbe der Kontur. Beide akzeptieren beliebige CSS-Farbzeichenfolgen.

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

Ihre erste Zeichnung

Sobald der Kontext bereit ist, können Sie sofort zeichnen. fillRect(x, y, w, h) zeichnet ein ausgefülltes Rechteck mit dem aktuellen fillStyle.

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

Den Canvas löschen

clearRect(x, y, w, h) löscht einen rechteckigen Bereich und setzt ihn auf transparent zurück. Den gesamten Puffer zu löschen, ist normalerweise der erste Schritt jedes Animationsframes.

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

Status speichern und wiederherstellen

save() legt den aktuellen Stil und die aktuelle Transformation auf einem Stapel ab; restore() holt sie wieder vom Stapel. So werden vorübergehende Änderungen isoliert.

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

Feature-Erkennung

Schützen Sie sich vor sehr alten Browsern, indem Sie prüfen, ob getContext vorhanden ist, bevor Sie die Methode verwenden.

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

Kurzer Test

Testen Sie Ihr Verständnis der Canvas-Einrichtung.

Zusammenfassung: Canvas-Einrichtung

Sie haben gelernt, den Canvas abzurufen, getContext('2d') aufzurufen, den Ursprung oben links zu verstehen, Puffer- und CSS-Größe festzulegen, High-DPI mit devicePixelRatio zu behandeln und fillStyle/strokeStyle zu konfigurieren. Als Nächstes geht es um das Zeichnen von Formen und Pfaden.

Häufig gestellte Fragen

Ist die Lektion „Den Canvas-Kontext einrichten“ kostenlos?

Ja — der vollständige Text von „Den Canvas-Kontext einrichten“ 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 „Den Canvas-Kontext einrichten“?

Rufen Sie den 2D-Rendering-Kontext ab und konfigurieren Sie ihn. 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 1 von 4.

Wie lange dauert die Lektion „Den Canvas-Kontext einrichten“?

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