image

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 live online training, plus books, videos, and digital content from nearly 200 publishers.