CSS, HTML und Javascript mit {stil}

Javascript canvas rotate

JS element width height

Das Rotieren eines Bildes in einem Canvas ist tricky, denn die Methode rotate() rotiert das Canvas um den Nullpunkt des Canvas oben links. Das Canvas ist auf diese Weise immer der vierte Quadrant eines Kreis um den Nullpunkt.

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

var can = document.getElementById('can');
ctx = can.getContext("2d");
   pic = new Image();
   pic.src = "maske.png";
   $(pic).load(function() {    // jQuery: wenn das Bild geladen ist
      ctx.drawImage(pic,10,10);
      …
      ctx.rotate(rad);         // Canvas rotieren
   });
Nicht das Bild auf dem Canvas wird gedreht – ein Canvas ist nur eine Fläche für Pixel. Sobald die Pixel des Bildes auf das Canvas gesetzt wurden, sind sie Teil des Canvas und kein selbstständiges Bild wie etwa eine Ebene in Photoshop oder ein Objekt in SVG.

Die Drehung wird in Radiant angegeben (siehe auch Javascript Zeichnung und Animieren mit HTML5 Canvas).

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

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 (10,10). 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.