El método CanvasRenderingContext2D.rotate() de la API Canvas 2D añade una rotación a la matriz de transformación.

Sintaxis

void ctx.rotate(angulo);

Parámetros

angulo
El ángulo de rotación en radianes, en sentido horario. Se puede usar grado* Math.PI / 180 si se quiere calcular a partir de un valor de grado sexagesimal.

El centro de rotación es siempre el orígen del canvas. Para cambiar el centro de rotación hay que mover el canvas mediante el método translate().

Ejemplos

Rotando una figura

En este ejemplo se rota un rectangulo 45º. Nótese que el centro de rotación es la esquina superior izquierda del canvas y no un punto cualquiera relativo a alguna figura.

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// origen del punto de transformación
ctx.arc(0, 0, 5, 0, 2 * Math.PI);
ctx.fillStyle = 'blue';
ctx.fill();

// rectángulo sin rotar
ctx.fillStyle = 'gray';
ctx.fillRect(100, 0, 80, 20);

// rectángulo rotado 45º
ctx.rotate(45 * Math.PI / 180);
ctx.fillStyle = 'red';
ctx.fillRect(100, 0, 80, 20);

// se reinicia la matriz de transformación a la matriz identidad
ctx.setTransform(1, 0, 0, 1, 0, 0);

Resultado

El centro de rotación es azul. El rectángulo no rotado es gris, y el rectángulo rotado es rojo.

Rotando una figura por su centro

Este ejemplo rota una figura alrededor del punto central de ésta. Para realizarlo se aplican estos pasos a la matriz de transformación:

  1. Primero, translate() mueve el orígen de la matriz hacia el centro de la figura.
  2. rotate() rota la matriz la cantidad deseada.
  3. Finalmente, translate() mueve el origen de la matriz de nuevo a su punto inicial. Esto se realiza utilizando los valores del centro de coordenadas de la figura en dirección negativa.

HTML

<canvas id="canvas"></canvas>

JavaScript

La figura es un rectángulo con su esquina en (80, 60), un ancho de 140 y un alto de 30. El centro de la coordenada horizontal está en  (80 + 140 / 2) = 150. Su centro en la coordenada vertical será  (60 + 30 / 2) = 75. Por tanto, el punto central está en (150, 75).

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// rectángulo sin rotar
ctx.fillStyle = 'gray';
ctx.fillRect(80, 60, 140, 30);

// Matriz de transformación
ctx.translate(150, 75);
ctx.rotate(Math.PI / 2);
ctx.translate(-150, -75);

// rectángulo rotado
ctx.fillStyle = 'red';
ctx.fillRect(80, 60, 140, 30);

Resultado

El rectángulo no rotado es gris, y el rectángulo rotado es rojo.

Especificaciones

Especificación Status Comentarios
HTML Living Standard
La definición de 'CanvasRenderingContext2D.rotate' en esta especificación.
Living Standard  

Compatibilidad con exploradores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Soporte básicoChrome Soporte completo SiEdge Soporte completo 12Firefox Soporte completo SiIE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si

Leyenda

Soporte completo  
Soporte completo

Véase también

Etiquetas y colaboradores del documento

Etiquetas: 
Colaboradores en esta página: mdnwebdocs-bot, albertor21
Última actualización por: mdnwebdocs-bot,