HTML canvas drawImage con un ángulo

Question

Estoy experimentando con la animación en <canvas> y no sé cómo dibujar una imagen en un ángulo. El efecto deseado es unas pocas imágenes dibujadas como de costumbre, con una imagen girando lentamente. (Esta imagen no está en el centro de la pantalla, si eso hace 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 es el centro de la imagen en el lienzo.

Answer 2

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

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); 
} 

A continuación, puede llamar de esta manera:

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); 

Answer 3

es interesante que la primera solución funcionó para tanta gente, que no dio el resultado que necesitaba. Al final he tenido 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) es las coordenadas en el lienzo que quiero que la imagen que se encuentra en y (x, y) es el punto de la imagen en la que desea que la imagen gire.