Javascript Canvas: mehrere Objekte gleichzeitig rotieren lassen

Mit Animationen in Javascript Canvas habe ich mich in den letzten Monaten schon mehrfach beschäftigt. Erst vor Kurzem bin ich dabei auf den Bereich der “Transformationen” in der Canvas-Bibliothek aufmerksam geworden. Dazu gehören u.a. die Funktionen

• save()
• restore()
• translate()
• rotate()
• scale()

 
Mehr Informationen: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations

Um den Umgang mit Transformationen zu studieren, habe ich mir folgendes Beispiel überlegt: Ein rotes und ein grünes Quadrat sollen unabhängig voneinander in verschiedene Richtungen rotieren.

Wir beginnen mit einem roten Quadrat, welches sich an der Position (x=50, y=50) befindet und eine Höhe und Breite von 50px besitzt. Ich verwende die Canvas-Funktion “rect”: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rect

Das Quadrat soll nun um 5 Grad nach rechts geneigt werden. Dazu kann die Canvas-Funktion “rotate” benutzt werden, mit dem das Canvas um seinen Koordinatenursprung rotiert werden kann.

Testen Sie in der Codebox oben verschiedene Winkel, indem Sie statt 5 die Werte 10, 15, 20 usw. ausprobieren! Sie werden feststellen, dass das Quadrat um den Koordinatenursprung, d.h. um die linke obere Ecke rotiert.

Damit das Quadrat korrekt “um sich selbst” rotiert, muss der Ursprung vor der Rotation auf die Mitte des Quadrats gesetzt werden, also an die Position (x=75, y=75). Wir verwenden dafür die Canvas-Funktion “translate”. Nach dem Aufruf von “translate” liegt in der Mitte des Quadrats der Punkt (x=0, y=0) und die linke obere Ecke des Quadrats liegt bei (x=-25, y=-25). Der Aufruf “rect” zum Zeichnen des Quadrats muss daher entsprechend abgeändert werden.

Nun haben wir noch das Problem, dass die Funktion “clearRect” nicht ordnungsgemäß funktioniert, wenn das Canvas rotiert und sein Ursprung verschoben wurde. Das heißt, clearRect bezieht sich nun auch auf das transformierte Canvas und nicht auf unsere ursprüngliche Canvas-Fläche. Wir brauchen die Funktion, damit das Rechteck beliebig oft mit verschiedenen Einstellungen neu gezeichnet werden kann, z.B. wenn Sie den angle1 verändern und dann erneut auf “Ausführen” klicken. Auch bei einer Animation muss in einem bestimmten Millisekunden-Intervall jeweils die ganze Canvas-Fläche gelöscht und neu gezeichnet werden.

Um das in Ordnung zu bringen, nutzen wir die Funktion “save”, um den aktuellen Zustand des Canvas (Rotation und Ursprung) zwischenzuspeichern. Nachdem wir unser Quadrat gezeichnet haben, stellen wir den Zustand mit “restore” wieder her. Die mit translate und rotate vorgenommenen Änderungen werden damit wieder zurückgesetzt (was sich nicht auf das gerade gezeichnete Quadrat auswirkt).

Testen Sie nun den Code für verschiedene Winkel:

Ich führe nun ein zweites, grünes Quadrat ein, welches auch um einen bestimmten Winkel (angle2) gedreht wird.

Zur Animation ist es nun nicht mehr weit. Zwei Schritte sind noch notwendig:

• Die Funktion “rotateObjects” wird nicht mehr nur einmal, sondern wiederholt in einem Zeitintervall von z.B. 10ms aufgerufen. Ich verwende “setInterval” um das Intervall zu definieren.
• Bei jedem Intervallaufruf müssen die Winkel angle1 und angle2 geringfügig erhöht oder erniedrigt werden, damit der Effekt einer Rotation ensteht.

Hinweis: Wenn Sie jetzt mehrfach auf “Ausführen” klicken, wird es zu Problemen kommen.

Die ganze Datei gibt es hier zum Download: drehen.html