web-dev-qa-db-fra.com

HTML5 canvas drawImage avec un angle

J'expérimente l'animation dans <canvas> et je ne sais pas comment dessiner une image en biais. L'effet souhaité 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).

javascripthtmldrawimage
33
Greg

Vous devez modifier la matrice de transformation avant de dessiner l'image que vous souhaitez 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 sont le centre de l'image sur la toile.

62
Jakub Wieczorek

J'ai écrit une fonction (basée sur la réponse de Jakub) qui permet à l'utilisateur de peindre une image dans une position X, Y basée sur 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 l'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 );
8
Yaume

Il est intéressant de noter que la première solution a fonctionné pour tant de personnes, elle n'a pas donné le résultat dont j'avais besoin. Au final, j'ai dû faire ceci:

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 sur lesquelles je veux que l'image soit située et (x, y) est le point sur l'image où je veux que l'image pivote.

4
PetrolHead