HTML: Aprende a hacer transformaciones de rotación

Otra interesante posibilidad es la capacidad de rotar un elemento de HTML dentro de la etiqueta <canvas>, para ello vamos a utilizar el método rotate().

La transformación de rotación requiere un centro de rotación, desde el que se realizará la rotación del elemento. Es decir un punto de anclaje para ella. Para definir este punto de anclaje o centro de rotación, debemos primero trasladar el contexto del canvas desde la esquina superior izquierda al punto que necesitemos usar como centro de rotación.

Veamos un ejemplo de código, para comprender mejor este método de rotación:

<canvas id=”rotacion” width=”700” height=”200”></canvas>
<script> var canvas = document.getElementById(‘rotacion’);
var context = canvas.getContext(‘2d’);
var rectWidth = 150; var rectHeight = 75;
// traslada el contexto al centro del elemento canvas context.translate(canvas.width / 2, canvas.height / 2);
// Rota 45 grados en sentido horario context.rotate(Math.PI / 4);

context.fillStyle = ‘blue’; context.fillRect(rectWidth
/ -2, rectHeight
/ -2, rectWidth, rectHeight);
</script>
Como podemos ver en este ejemplo, el método rotate() nos permite rotar un elemento del HTML en sentido horario, o bien en sentido contrario.
Para fijar el centro de rotación en el centro del canvas utilizamos la siguiente sentencia:
context.translate(canvas.width / 2, canvas.height / 2);