utilizando HTML5 Canvas: rota la imagen sobre el punto arbitrario

Gire el dial en la parte superior de una imagen semicircular (hemisferio norte) como fondo. el rango podría ser de 0 a 180 grados. en la entrada al método que realiza la transformación de canvas, el dial giraría y se detendría sobre el valor coincidente. Esto es lo que estaba intentando basándome en la ayuda y la muestra transmitida por phrogz

En general, lo que quiere hacer es:

  1. Transforme el contexto al punto en el canvas por el que debería girar el objeto.
  2. Gire el contexto.
  3. Transforma el contexto por el desplazamiento negativo dentro del objeto para el centro de rotación.
  4. Dibuja el objeto en 0,0.

En codigo:

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

Aquí hay un ejemplo de trabajo que muestra esto en acción. (La matemática para la rotación fue pirateada experimentalmente para encontrar una cantidad de balanceo y compensación en radianes que se ajustan al dial de calibre rápido).

Como puede ser evidente, puede sustituir la llamada de translate en el paso # 3 anterior con compensaciones a la llamada drawImage() . Por ejemplo:

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

Se recomienda utilizar la traducción de contexto cuando tiene varios objetos para dibujar en la misma ubicación.