Vor einigen Tagen habe ich gezeigt, wie man mit dem Canvas-Element ein Bild drehen kann. Heute das ganze als Animation, ein Bild rotiert um die eigene Achse:
So und wie realisiert man das ganze?
Zuerst legen wir wieder ein Canvas-Element an:
Nun benötigen wir noch den Java-Script-Teil, den wir in den Head-Bereich der Seite einbauen:
Kurze Erklärung, mit der Init-Methode erstellen wir einen Timer, dieser ruft die zeichneCanvas Methode im 100ms Interval auf.
Damit die init() Methode beim Laden der Seite aufgerufen wird, fügen wir diese dem Body-Tag hinzu:
Kern der Rotation sind die folgenden Zeilen:
c.translate(150, 150);
c.rotate(Math.PI/180);
c.translate(-150, -150);
Was passiert hier? Zuerst setzen wir die Rotationsachse auf den Mittelpunkt des Bildes, anschließend wird das Bild um ein Grad gedreht. Die Angabe des Winkels erfolgt in Radiant.
Nach der Rotation wird die Achse wieder auf den Koordinatenursprung gesetzt.
