Toile HTML5 drawImage avec un angle

Question

J'expérimente l'animation dans <canvas> et je ne parviens pas à dessiner une image en biais. L'effet désiré est quelques images dessinées comme d'habitude, avec une image tournant lentement. (Cette image n'est pas au centre de l'écran, si cela fait une différence).

Answer 1

Vous devez modifier la matrice de transformation avant de dessiner l'image que vous voulez faire pivoter.

Supposons que l'image pointe vers un objet 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); 

Les coordonnées x, y est le centre de l'image sur la toile.

Answer 2

J'ai écrit une fonction (en fonction de la réponse de Jakub) qui permet à l'utilisateur de peindre une image dans une position X, Y sur la base d'une rotation personnalisée dans un point de rotation personnalisé:

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

Ensuite, vous pouvez appeler comme ceci:

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

il est intéressant de noter que la première solution a fonctionné pour tant de gens, il n'a pas donné le résultat que je avais besoin. En fin de compte que je devais faire:

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

où (positionX, positionY) est les coordonnées sur la toile que je veux que l'image soit situé à et (x, y) est le point sur l'image où je veux l'image pour tourner.