Das canvas-Element

Demonstrationen und Experimente

Inhalte

1. Einleitung: Erstellung dynamischer Pixelgrafiken. canvas vs. svg
2. Beispiele:
   • Einfache Formen und Linien (Pfade)
   • Text im Canvas
   • Animation unter Verwendung von setInterval()
   • Animation unter Verwendung von setAnimationFrame()
   • Komplexere Formen und Konturen (Kreise, Rundungen, Kurven)
   • Dynamische Anpassung grafischer Elemente (Ausgabe eines Koordinatensystems und einer manipulierbaren Sinuskurve [Spannung / Frequenz])
   • Eine einfache Paint-Applikation auf Basis eines responsiven Canvas

Hinweis: Alle Beispiele sind mit Erläuterungen versehen. Diese sollten es möglich machen den JavaScript-Code weitestgehend nachvollziehen zu können. Für weitere Informationen konsultieren Sie bitte das entsprechende Dokumentationsmaterial, bzw. unter (https://developer.mozilla.org/en-US/).