javascript - imagen - HTML5 lienzo drawImage con un ángulo

drawimage javascript

Question

Estoy experimentando con la animación en <canvas> y no puedo averiguar cómo dibujar una imagen en ángulo. El efecto deseado son algunas imágenes dibujadas como de costumbre, con una imagen girando lentamente. (Esta imagen no está en el centro de la pantalla, si eso marca alguna diferencia).

Answer 1

Debe modificar la matriz de transformación antes de dibujar la imagen que desea rotar.

Supongamos que la imagen apunta a un objeto HTMLImageElement.

var x = canvas.width / 2;
var y = canvas.height / 2;
var width = image.width;
var height = image.height;

context.translate(x, y);
context.rotate(angleInRadians);
context.drawImage(image, -width / 2, -height / 2, width, height);
context.rotate(-angleInRadians);
context.translate(-x, -y);

Las coordenadas x, y son el centro de la imagen en el lienzo.

Answer 2

Es interesante que la primera solución funcionó para tanta gente, no dio el resultado que necesitaba. Al final tuve que hacer esto:

ctx.save();
ctx.translate(positionX, positionY);
ctx.rotate(angle);
ctx.translate(-x,-y);
ctx.drawImage(image,0,0);
ctx.restore();

donde (positionX, positionY) son las coordenadas en el lienzo donde quiero que esté ubicada la imagen y (x, y) es el punto de la imagen donde quiero que gire la imagen.

Answer 3

He escrito una función (basada en la respuesta de Jakub) que permite al usuario pintar una imagen en una posición X, Y basada en una rotación personalizada en un punto de rotación personalizado:

function rotateAndPaintImage ( context, image, angleInRad , positionX, positionY, axisX, axisY ) {
  context.translate( positionX, positionY );
  context.rotate( angleInRad );
  context.drawImage( image, -axisX, -axisY );
  context.rotate( -angleInRad );
  context.translate( -positionX, -positionY );
}

Entonces puedes llamarlo así:

var TO_RADIANS = Math.PI/180; 
ctx = document.getElementById("canvasDiv").getContext("2d");
var imgSprite = new Image();
imgSprite.src = "img/sprite.png";

// rotate 45º image "imgSprite", based on its rotation axis located at x=20,y=30 and draw it on context "ctx" of the canvas on coordinates x=200,y=100
rotateAndPaintImage ( ctx, imgSprite, 45*TO_RADIANS, 200, 100, 20, 30 );