Crea tu web, tutor html, css

Rotate: Girar el canvas

Este método gira el canvas un ángulo dado por el argumento del método en radianes. El centro de giro es el origen de coordenadas, es decir: la esquina superior izquierda, siempre que no se haya aplicado ninguna vez translate()

Si aplicas un rotate(0.75) a partir de ahora todos los dibujos que se hagan aparecerán rotados a la derecha un ángulo de 0.75 radianes. Si usas un argumento negativo el giro se hace hacia la izquierda, contrario a las agujas del reloj (cuando los relojes eran de agujas). El centro de giro en cualquier caso es el origen de coordenadas, la esquina superior izquierda (si n o lo has trasladado).

En las operaciones con el canvas vas a ver que se usa mucho javascript, si no te manejas bien con este lenguaje de programación puedes consultar o seguir el tutorial de Javascript desde cero donde tienes una explicaicón de como crear scripts y aplicarlos a tus páginas.

Recuerda que el argumento es el ángulo en radianes, esa unidad que nunca terminaste de entender en el colegio. Recuerda que para pasar de grados a radianes la fórmula es muy simple:

radianes = grados*Math.PI/180

Así que π radianes es media vuelta y 2·π es una vuelta completa. Fácil. Siquieres cambiar el centro de giro debes usar translate()

<canvas width="600" height="300" id="mipanel" style="border: 1px solid black"></canvas> <script> var miLienzo = document.getElementById("mipanel"); var lapiz = miLienzo.getContext("2d"); lapiz.fillStyle="red"; lapiz.rotate(10*Math.PI/180); lapiz.fillRect(150, 0, 100, 100); </script>
Prueba este código

Si vuelves a aplicar este método los cambios se harán sobre los valores actuales, no sobre los originales. Es decir si vuelves a hacer un rotate(35*Math.PI/180) el nuevo rectángulo girará otros 35º más un total de 45º respecto a la situación original (la por defecto). Las rotaciones se acumulan

Girar el canvas es como giarar un hoja de papel en la que dibujas, el giro incluye al sistema de coordenadas. Después del giro las coordenadas X no se miden en horizontal ni las coordenadas Y en vertical sino inclinadas según la nueva orientación. En el ejemplo los ejes x e y formarían 10º con la horizontal y vertical. En la figura el texto tiene las mismas coordenadas en ambos casos x: 2 y: 4.

El giro del plano en Canvas
Canvas sin girar
Plano girado: cuadrícula del canvas girada
Canvas girado 10º

Como ves el centro de giro es la esquina superior izquierda (el origen de coordenadas). Si quieres cambiarlo tienes que realizar primeor una traslación de coordenadas, llevar el origen por defecto al punto donde quieres situar el centro de giro. En este ejemplo el rectángulo sobre su propio centro. Para ello trasladamos el origen de coordenadas al centro del rectángulo, giramos y luego revertimos el cambio de coordenadas.

<canvas width="600" height="300" id="mipanel" style="border: 1px solid black"></canvas> <script> var miLienzo = document.getElementById("mipanel"); var lapiz = miLienzo.getContext("2d"); lapiz.fillStyle="red"; lapiz.fillRect(150, 25, 100, 100); //rectágulo normal sin transformaciones lapiz.translate(200, 75); // ponemos el origen en el centro del rectángulo //mover horizontal : x+ancho/2 vertical: y+alto/2 lapiz.rotate(45*Math.PI/180); lapiz.translate(-200, -75); //revertir el cambio de origen lapiz.fillStyle = "blue"; lapiz.fillRect(150, 25, 100, 100); </script>
Prueba este código
Al girar las coordenadas no cambian pero ahora se miden a lo largo de los ejes girados, no de la horizontal y vertical.