à l'aide de HTML5 Canvas - faire pivoter l'image autour d'un point arbitraire

Question

Faites pivoter le cadran au-dessus d'une image semi-circulaire (hémisphère Nord) comme arrière-plan. la plage peut être comprise entre 0 et 180 degrés. lors de l'entrée dans la méthode qui effectue la transformation du canevas, le cadran pivotait et s'arrêtait sur la valeur correspondante. Voici ce que j'essayais en fonction de l'aide et de l'échantillon transmis par phrogz

Answer 1

En général, ce que vous voulez faire est:

1. Transformer le contexte pour faire le point sur la toile que l'objet doit tourner autour.
2. Tourner le contexte.
3. Transformer le contexte par le décalage négatif à l'intérieur de l'objet pour le centre de la rotation.
4. Dessiner l'objet à 0,0.

Dans le code:

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

Voici un exemple montrant en action. (Le calcul de la rotation était juste expérimentalement piraté pour trouver une quantité de swing et de l'offset en radians qui correspondent à la rapidement esquissé le manomètre.)

Comme peut-être évident, vous pouvez remplacer l' translate appeler à l'étape 3 ci-dessus, avec des compensations à l' drawImage() appel. Par exemple:

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

Utilisation d'un contexte de traduction est recommandé lorsque vous avez plusieurs objets à dessiner au même endroit.