JavaScript - Canvas: Ein Anfängerguide für digitale Zeichnungen

Hallo da, angehender Programmierer! Ich freue mich sehr, dein Guide auf dieser aufregenden Reise in die Welt von JavaScript und Canvas zu sein. Als jemand, der seit über einem Jahrzehnt Informatik unterrichtet, kann ich dir sagen, dass Canvas eines der unterhaltsamsten und erfüllendsten Themen zum Lernen ist. Es ist wie ein digitaler Spielplatz direkt in deinem Webbrowser!

Was ist Canvas?

Bevor wir uns in den Code stürzen, lassen wir uns erst einmal anschauen, was Canvas ist. Stell dir vor, du hast ein leeres Blatt Papier und eine Reihe farbenfroher Stifte. Das ist im digitalen Bereich im Grunde genommen das, was Canvas ist - ein leerer Bereich auf deiner Webseite, auf dem du alles möchtest mit JavaScript zeichnen!

Canvas wurde mit HTML5 eingeführt und hat sich seitdem zu einem mächtigen Werkzeug für die Erstellung von Grafiken, Animationen und sogar Spielen direkt in Webbrowsern entwickelt. Es ist wie ein mini Kunststudio direkt in deinem Code-Editor!

Canvas mit JavaScript handhaben

Nun, lasst uns die Ärmel hochwerren und anfangen zu zeichnen! Zuerst müssen wir unser Canvas in HTML einrichten.

<canvas id="myCanvas" width="400" height="200"></canvas>

Dies erstellt ein Canvas-Element, das 400 Pixel breit und 200 Pixel hoch ist. Denk daran als deine digitale Zeichenplatte.

Den Einstieg mit Canvas

Um auf unserem Canvas zu zeichnen, müssen wir einen Verweis auf es in unserem JavaScript-Code erhalten und seinen Zeichenkontext ermitteln.

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

Die Methode getContext('2d') gibt uns einen 2D-Renderkontext - das Werkzeug, das wir zum Zeichnen auf unserem Canvas verwenden werden.

Zeichnen von Formen

Lassen wir mit etwas Einfachem anfangen - einem Rechteck zeichnen!

ctx.fillStyle = 'blau';
ctx.fillRect(50, 50, 100, 75);

Dieser Code zeichnet ein blaues Rechteck, das bei den Koordinaten (50, 50) beginnt und eine Breite von 100 Pixeln und eine Höhe von 75 Pixeln hat. Es ist, als würde dein digitaler Stift sagen: "Hey, zeichne hier ein blaues Rechteck und mach es so groß!"

Linien zeichnen

Nun probieren wir, eine Linie zu zeichnen:

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 100);
ctx.stroke();

Dieser Code startet einen neuen Pfad, bewegt die "Spitze" zu (50, 50), zeichnet dann eine Linie zu (200, 100) und schließlich den Pfad, um ihn sichtbar zu machen. Es ist wie "Verbinde die Punkte", aber mit Code!

Kreise zeichnen

Wie wäre es, wenn wir ein Lächelgesicht zeichnen? Zuerst einen Kreis für das Gesicht:

ctx.beginPath();
ctx.arc(200, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = 'gelb';
ctx.fill();
ctx.stroke();

Dies zeichnet einen gelben Kreis mit einem schwarzen Rand. Die Methode arc mag etwas beängstigend aussehen, aber denke daran als ob dein Stift sagt: "Zeichne einen Kreis, der bei (200, 100) zentriert ist, mit einem Radius von 50, beginnend bei 0 und gehe bis zum Ende (das bedeutet Math.PI * 2)."

Text hinzufügen

Fügen wir etwas Text zu unserem Canvas hinzu:

ctx.font = '20px Arial';
ctx.fillStyle = 'schwarz';
ctx.fillText('Hallo, Canvas!', 10, 30);

Dies setzt die Schrift auf 20-Pixel Arial, die Farbe auf schwarz und schreibt "Hallo, Canvas!" an der Position (10, 30).

Beispiele

Nun, da wir die Grundlagen abgedeckt haben, schauen wir uns einige unterhaltsame Beispiele an, um zu sehen, was Canvas wirklich kann!

Beispiel 1: Ein Haus zeichnen

// Canvas einrichten
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Hauskörper zeichnen
ctx.fillStyle = 'braun';
ctx.fillRect(100, 100, 150, 100);

// Dach zeichnen
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(175, 50);
ctx.lineTo(250, 100);
ctx.fillStyle = 'rot';
ctx.fill();

// Tür zeichnen
ctx.fillStyle = 'blau';
ctx.fillRect(150, 150, 50, 50);

// Fenster zeichnen
ctx.fillStyle = 'gelb';
ctx.fillRect(200, 120, 30, 30);

Dieser Code zeichnet ein einfaches Haus mit einem braunen Körper, einem roten Dach, einer blauen Tür und einem gelben Fenster. Es ist, als ob man ein Haus mit Codeblöcken anstatt von Legosteinen baut!

Beispiel 2: Ein animierter Kreis

Lassen wir die Dinge in Bewegung setzen! Hier ist eine einfache Animation eines springenden Kreises:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

let x = 50;
let y = 50;
let dx = 2;
let dy = 2;
const radius = 20;

function drawCircle() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fillStyle = 'grün';
ctx.fill();

if (x + radius > canvas.width || x - radius < 0) {
dx = -dx;
}
if (y + radius > canvas.height || y - radius < 0) {
dy = -dy;
}

x += dx;
y += dy;

requestAnimationFrame(drawCircle);
}

drawCircle();

Dieser Code erstellt einen grünen Kreis, der um das Canvas springt. Es ist, als ob man sein eigenes kleines Pong-Spiel erstellt!

Canvas Methoden Tabelle

Hier ist eine praktische Tabelle einiger gängiger Canvas-Methoden, die wir verwendet haben und einiger mehr:

Methode	Beschreibung
fillRect(x, y, width, height)	Zeichnet ein gefülltes Rechteck
strokeRect(x, y, width, height)	Zeichnet einen Rechteckrand
clearRect(x, y, width, height)	Löscht den angegebenen rechteckigen Bereich
beginPath()	Startet einen neuen Pfad
moveTo(x, y)	Verschiebt den Pfad an die angegebene Position
lineTo(x, y)	Zeichnet eine Linie zur angegebenen Position
arc(x, y, radius, startAngle, endAngle)	Zeichnet einen Bogen oder einen Kreis
fill()	Füllt den aktuellen Pfad
stroke()	Zeichnet den aktuellen Pfad
fillText(text, x, y)	Zeichnet den Text auf dem Canvas
strokeText(text, x, y)	Zeichnet den Textrand

Denke daran, das Lernen von Code ist wie das Lernen einer neuen Sprache. Es erfordert Zeit und Übung, aber bevor du es weißt, wirst du erstaunliche Dinge mit Canvas erstellen! Weiter experimentieren, verschiedene Formen und Methoden kombinieren und vor allem: Spaß daran haben! Wer weiß? Das nächste große Webgame könnte von dir mit Canvas erstellt werden!

Credits: Image by storyset