HTML Canvas
Zuvor setzte SVG scharfe Icons als Vektor-Markup oder .svg-Datei. Diese Lektion stellt canvas vor: eine leere Bitmap-Box, die JavaScript bemalt. HTML platziert und dimensioniert nur; Skripte zeichnen Pixel. Praxis-Fokus — Element + winziges 2D-Zeichnen — kein voller Canvas-API-, Spiele- oder WebGL-Kurs.
Warum canvas in einem HTML-Kurs
Anfänger treffen canvas in Diagrammen und Minispielen. Die Trennung hilft: HTML besitzt das Element; JS die Pixel. Nach SVG zeigt canvas das andere gängige Zeichenwerkzeug. Hier reichen getContext("2d") und fillRect.
Direkte Antwort
1) canvas mit id, width, height und Fallback-Text. 2) In JS getContext("2d"). 3) Mit fillStyle + fillRect zeichnen. 4) Attribute setzen die Bitmap-Auflösung. 5) SVG für Icons; canvas für dynamische Pixel. 6) Nur Intro.
📊 Canvas vs SVG for beginners
| Topic | Canvas | SVG |
|---|---|---|
| Drawing model | Bitmap pixels via JavaScript | Vector shapes in markup (or .svg file) |
| Who paints | Scripts on a 2d (or other) context | Browser renders SVG tree |
| Best beginner fit | Dynamic charts, games, freehand | Icons, logos, sharp UI marks |
| Scales when resized | Can blur if only CSS-stretched | Stays sharp as vectors |
| Accessible naming | Label the canvas; drawings are pixels | alt / aria-label on meaningful graphics |
| This course depth | Element + tiny 2d draw | Embed inline or via img |
Winziges canvas-Element
Ohne Skript ist canvas ein leeres Rechteck. HTML deklariert Größe und id, damit Skripte es finden.
<canvas id="demo" width="300" height="150">
Your browser does not support canvas drawing.
</canvas>
Die Hülle lesen
- canvas erzeugt die Fläche
- width/height setzen die Bitmap-Größe
- id ermöglicht die Auswahl
- Text zwischen Tags ist Fallback
- nur CSS-Größe kann weichzeichnen
- anders als SVG keine Form-Kinder im HTML
Rechteck mit 2D-Kontext
Kurzes Skript bemalt. getContext("2d") liefert die 2D-API; fillRect füllt ein Rechteck.
<canvas id="c" width="300" height="150">
Canvas drawing is not available in this browser.
</canvas>
<script>
const canvas = document.getElementById("c");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#248";
ctx.fillRect(20, 20, 120, 80);
</script>
Die Zeichenaufrufe lesen
- getElementById findet canvas
- getContext("2d") öffnet die API
- fillStyle setzt die Farbe
- fillRect füllt ein Rechteck
- ohne Skript nur Fallback
- als Nächstes web storage
Canvas vs. SVG wählen
- Statisches scharfes Logo: SVG
- Häufig aktualisierte Pixel: canvas
- Formen als DOM: oft SVG
- Pixelregion bemalen: canvas
- Einfaches Badge: meist SVG
- WebGL/Spiele: jenseits dieses Intros
Übung — canvas auf der Seite
- Hülle einfügen.
- Skript hinzufügen; Rechteck prüfen.
- Farbe/Zahlen ändern.
- Skript kurz entfernen.
- Nur per CSS strecken — mögliche Unschärfe.
- Satz: canvas ist JS-Bitmap; SVG Vektor-Markup.
- Ausblick: web storage.
Typische Fehler
- Formen nur von HTML erwarten
- Fallback-Text vergessen
- canvas für Logos statt SVG
- canvas mit SVG verwechseln
- nur CSS-Größe ändern
- Intro als vollen Canvas-Kurs nehmen
- bedeutsames canvas unbenannt lassen
Zusammenfassung
- canvas ist eine leere Bitmap-Fläche
- JavaScript zeichnet mit getContext("2d") und fillRect
- SVG für Icons; canvas für dynamische Pixel
- Fallback-Text hilft ohne Zeichnen
- SVG war Vektor; hier Skript-Pixel
- Als Nächstes: HTML web storage
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt