html5 - type - w3school canvas tutorial

utilizando HTML5 Canvas: rota la imagen sobre el punto arbitrario

Question

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 lienzo, 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

Answer 1

En general, lo que quiere hacer es:

1. Transforme el contexto al punto en el lienzo 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.restore();

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.