14 Bewegte Objekte auf dem Canvas erzeugen
Canvas-Animationen funktionieren ganz ähnlich wie ein Daumenkino: Du zeichnest eine Form, löscht sie anschließend und zeichnest sie an einer anderen Stelle neu. Das klingt ziemlich aufwendig. JavaScript kann die Position der Form jedoch sehr schnell aktualisieren, sodass du eine flüssige Animation erhältst. In Kapitel 10 hast du erfahren, wie du DOM-Elemente animieren kannst. In diesem Kapitel animierst du die Zeichnungen auf deinem Canvas.
14.1 Ein Quadrat animieren
Wir verwenden nun canvas und setInterval, um ein Quadrat langsam über die Seite zu bewegen. Erzeuge eine neue Datei namens canvasanimation.html ...
Get JavaScript kinderleicht! now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
