Emzett Digital

Zeichnen mit Canvas und Animation

Das HTML-Element <canvas> ist eine Zeichenfläche, auf der du per JavaScript Formen, Bilder und Animationen erzeugst. Auf Canvas basieren viele Browserspiele und Diagramme.

Erste Zeichnung

Probier es selbst · canvas1.html

Dein Code

Ergebnis

Das Koordinatensystem beginnt oben links (0, 0); x wächst nach rechts, y nach unten.

Linien und Pfade

Probier es selbst · canvas2.html

Dein Code

Ergebnis

Methode	Wirkung
`fillRect`, `strokeRect`, `clearRect`	Rechtecke füllen/umranden/löschen
`beginPath`, `moveTo`, `lineTo`, `closePath`	Pfade zeichnen
`arc`, `quadraticCurveTo`, `bezierCurveTo`	Kreise und Kurven
`fill`, `stroke`	Pfad füllen / umranden
`fillText`, `strokeText`	Text
`drawImage`	Bild oder anderes Canvas
`save`, `restore`, `translate`, `rotate`, `scale`	Zustand und Transformationen

Animation mit requestAnimationFrame

Eine Animation zeichnet immer wieder ein neues Bild. requestAnimationFrame ruft deine Funktion passend zur Bildwiederholrate (meist 60-mal pro Sekunde) auf:

Probier es selbst · animation.html

Dein Code

Ergebnis

Der Trick: Bewegung hängt von der vergangenen Zeit (dt) ab, nicht von der Anzahl der Bilder. So läuft die Animation auf schnellen und langsamen Geräten gleich schnell.

Steuerung per Tastatur

Probier es selbst · steuerung.html

Dein Code

<canvas id="c" width="320" height="140" style="border:1px solid #888" tabindex="0"></canvas>
<p>Klicke aufs Feld und steuere mit den Pfeiltasten.</p>
<script>
  const c = document.getElementById("c"), ctx = c.getContext("2d");
  const spieler = { x: 150, y: 60, groesse: 24 };
  const gedrueckt = new Set();
  window.addEventListener("keydown", e => { if (e.key.startsWith("Arrow")) { e.preventDefault(); gedrueckt.add(e.key); } });
  window.addEventListener("keyup", e => gedrueckt.delete(e.key));

function schleife() {
    if (gedrueckt.has("ArrowLeft"))  spieler.x -= 3;
    if (gedrueckt.has("ArrowRight")) spieler.x += 3;
    if (gedrueckt.has("ArrowUp"))    spieler.y -= 3;
    if (gedrueckt.has("ArrowDown"))  spieler.y += 3;
    spieler.x = Math.max(0, Math.min(c.width - spieler.groesse, spieler.x));
    spieler.y = Math.max(0, Math.min(c.height - spieler.groesse, spieler.y));
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.fillStyle = "tomato";
    ctx.fillRect(spieler.x, spieler.y, spieler.groesse, spieler.groesse);
    requestAnimationFrame(schleife);
  }
  schleife();
</script>

Ergebnis

Typische Spielschleife

Eingabe lesen (Tasten, Maus, Touch)
Zustand aktualisieren (Positionen, Punkte, Kollisionen)
Zeichnen (Bildfläche leeren, alles neu malen)
Nächsten Frame anfordern

Kollisionen zwischen Rechtecken prüfst du so:

Probier es selbst

Dein Code

Ergebnis

Ausgabe

true
false

Scharf auf Retina-Bildschirmen

Auf hochauflösenden Displays wirkt Canvas unscharf. Skaliere die Zeichenfläche mit devicePixelRatio:

text

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

Merke

canvas.getContext("2d") liefert den Zeichenkontext; Ursprung oben links
Rechtecke, Pfade, Kreise, Text und Bilder lassen sich zeichnen
Animation: requestAnimationFrame und Bewegung nach vergangener Zeit
Spielschleife: Eingabe, Zustand ändern, zeichnen
Kollision zweier Rechtecke durch vier Vergleiche

Aufgabe

Lass einen Ball über die Zeichenfläche springen und färbe ihn bei jedem Wandkontakt anders.

Das HTML-Element <canvas> ist eine Zeichenfläche, auf der du per JavaScript Formen, Bilder und Animationen erzeugst. Auf Canvas basieren viele Browserspiele und Diagramme.

Erste Zeichnung

Probier es selbst · canvas1.html

Dein Code

Ergebnis

Das Koordinatensystem beginnt oben links (0, 0); x wächst nach rechts, y nach unten.

Linien und Pfade

Probier es selbst · canvas2.html

Dein Code

Ergebnis

Methode	Wirkung
`fillRect`, `strokeRect`, `clearRect`	Rechtecke füllen/umranden/löschen
`beginPath`, `moveTo`, `lineTo`, `closePath`	Pfade zeichnen
`arc`, `quadraticCurveTo`, `bezierCurveTo`	Kreise und Kurven
`fill`, `stroke`	Pfad füllen / umranden
`fillText`, `strokeText`	Text
`drawImage`	Bild oder anderes Canvas
`save`, `restore`, `translate`, `rotate`, `scale`	Zustand und Transformationen

Animation mit requestAnimationFrame

Eine Animation zeichnet immer wieder ein neues Bild. requestAnimationFrame ruft deine Funktion passend zur Bildwiederholrate (meist 60-mal pro Sekunde) auf:

Probier es selbst · animation.html

Dein Code

Ergebnis

Der Trick: Bewegung hängt von der vergangenen Zeit (dt) ab, nicht von der Anzahl der Bilder. So läuft die Animation auf schnellen und langsamen Geräten gleich schnell.

Steuerung per Tastatur

Probier es selbst · steuerung.html

Dein Code

Ergebnis

Typische Spielschleife

Eingabe lesen (Tasten, Maus, Touch)
Zustand aktualisieren (Positionen, Punkte, Kollisionen)
Zeichnen (Bildfläche leeren, alles neu malen)
Nächsten Frame anfordern

Kollisionen zwischen Rechtecken prüfst du so:

Probier es selbst

Dein Code

Ergebnis

Ausgabe

true
false

Scharf auf Retina-Bildschirmen

Auf hochauflösenden Displays wirkt Canvas unscharf. Skaliere die Zeichenfläche mit devicePixelRatio:

text

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

Merke

canvas.getContext("2d") liefert den Zeichenkontext; Ursprung oben links
Rechtecke, Pfade, Kreise, Text und Bilder lassen sich zeichnen
Animation: requestAnimationFrame und Bewegung nach vergangener Zeit
Spielschleife: Eingabe, Zustand ändern, zeichnen
Kollision zweier Rechtecke durch vier Vergleiche

Aufgabe

Lass einen Ball über die Zeichenfläche springen und färbe ihn bei jedem Wandkontakt anders.