CSS, HTML und Javascript mit {stil}

Canvas Transformationen: rotate

Canvas Transformationen

Das Rotieren einer Form in einem Canvas ist tricky, denn context.rotate() rotiert nicht die Form, sondern das Koordinatensystem mit dem Nullpunkt oben links. Obendrein werden Transformationen wie rotate, scale und transform vor dem Zeichnen einer Form angewendet, erst dann wird die Form normal auf dem Canvas aufgetragen.

Aus Bildbearbeitungsprogrammen wie Adobe Photoshop oder Präsentationsprogrammen wie Powerpoint sind wir daran gewöhnt, dass Elemente um ihren Mittelpunkt gedreht werden. In einer Zeichnung mit SVG oder bei DOM-Elementen in einem HTML-Dokument bleibt ein Element bei Transformationen wie Rotation oder Skalieren erhalten und kann zu jeder Zeit erneut transformiert werden können.

0
var ctx = cx.getContext("2d");
ctx.rotate ( angle * Math.PI / 180);
ctx.fillRect(100,40,200,100);

Aktionen auf dem Canvas erzeugen keine Elemente, sondern Pixel. Die Form auf dem Canvas ist kein eigenständiges Element wie ein Rechteck im Illustrationsprogramm, sondern die Form verschmilzt sofort nach der fill-Anweisung mit dem Canvas und wird vergessen.

context.rotate()

Eine Transformation bewegt keine Elemente wie Transformationen in SVG oder CSS-Transformationen, sondern die Transformation ändert das Koordinatensystem.

context.rotate() rotiert den Canvas um den Nullpunkt des Canvas oben links. Die Drehung wird in Radiant angegeben (siehe auch Javascript Zeichnen und Animieren mit HTML5 Canvas).

2πrad = 360°

oder

1rad= 360° 2 π =180° π57,29578

Ohne weitere Angaben rotiert ctx.rotate() die Form um den Nullpunkt des Canvas.

Der Effekt der Rotation ist nur im Canvas sichtbar. Das Canvas ist sozusagen ein Fenster zum vierten Quadranten eines Kreises. Die Diagonale des Canvas ist der Durchmesser dieses Kreises.

Quadrant I Quadrant II Quadrant III Quadrant IV CANVAS
Canvas ist immer der vierte Quadrant eines Kreis um den Nullpunkt. Nicht die Form auf dem Canvas wird gedreht – der Canvas ist nur eine Fläche für Pixel. Sobald die Pixel auf den Canvas gesetzt wurden, sind sie Teil des Canvas und kein selbstständiges Element wie eine Ebene in Photoshop oder ein Objekt in SVG.

Wenn der Canvas vor dem Aufruf von ctx.rotate() nicht gelöscht wird, bleibt die Zeichnung stehen und wird durch die Rotation überlagert. Obendrein akkumulieren Transformationen – jeder Rotation geht von der letzten Transformation aus.

Rotieren um einen Punkt

Um das Canvas um einen anderen Punkt als den Nullpunkt zu rotieren, wird der Nullpunkt auf den gewünschten Punkt transformiert.

Das Bild ist 200 px breit, 170px hoch und beginnt auf (200,100). Der neue Nullpunkt für den Context ist (110,95).

ctx.translate(110,95);
ctx.rotate(rad);
ctx.translate(-110,-95);
ctx.drawImage(pic,10,10);

Bevor der Context geschrieben wird, muss der Context wieder zurück an seinen Ursprung.

Bei allen Transformationen bleibt das alte Bild erhalten und ctx.drawImage(pic,10,10) kopiert das Bild erneut in das Canvas. Das Canvas muss gelöscht bzw. geleert werden, damit der Eindruck entsteht, dass sich nur das Bild dreht.

ctx.clearRect(0,0,600,320);

Aber im Grunde genommen reicht es nicht, nur den sichtbaren Bereich des Canvas zu löschen – die Pixel, die bei der Rotation des Bildes entstanden sind, liegen auch außerhalb des sichtbaren Quadranten IV.

Rotieren um den Mittelpunkt

CANVAS ROTATE