Verwenden von HTML5 Canvas – Bild um einen beliebigen Punkt drehen

Drehen Sie das Zifferblatt über einem halbkreisförmigen Bild (nördliche Hemisphäre) als Hintergrund. Bereich könnte 0 – 180 Grad sein. Bei der Eingabe in die Methode, die die Canvas-Transformation durchführt, würde sich das Zifferblatt drehen und über dem übereinstimmenden Wert anhalten. Folgendes habe ich versucht, basierend auf der Hilfe und dem von phrogz weitergegebenen Beispiel

Im Allgemeinen möchten Sie Folgendes tun:

1. Verwandeln Sie den Kontext in den Punkt auf der Leinwand, um den sich das Objekt drehen soll.
2. Drehen Sie den Kontext.
3. Transformieren Sie den Kontext um den negativen Versatz innerhalb des Objekts für das Rotationszentrum.
4. Zeichnen Sie das Objekt bei 0,0.

In Code:

ctx.save();
ctx.translate( canvasRotationCenterX, canvasRotationCenterY );
ctx.rotate( rotationAmountInRadians );
ctx.translate( -objectRotationCenterX, -objectRotationCenterY );
ctx.drawImage( myImageOrCanvas, 0, 0 );
ctx.restore();

Hier ist ein Arbeitsbeispiel zeigt dies in Aktion. (Die Mathematik für die Drehung wurde nur experimentell gehackt, um einen Schwungbetrag und einen Versatz im Bogenmaß zu finden, der auf das schnell skizzierte Messgerät passt.)

Wie ersichtlich ist, können Sie die ersetzen translate Rufen Sie in Schritt 3 oben mit Offsets zu auf drawImage() Anruf. Beispielsweise:

ctx.drawImage( myImageOrCanvas, -objectRotationCenterX, -objectRotationCenterY );

Die Verwendung der Kontextübersetzung wird empfohlen, wenn Sie mehrere Objekte an derselben Stelle zeichnen müssen.