Comment faire pivoter une image dans un canvas?

Je fais un HTML5 canvas jeu, et je souhaite faire pivoter l'une des images.

var link = new Image();
link.src='img/link.png';
link.onload=function(){
    ctx.drawImage(link,x,y,20,20); //draws a chain link or dagger
}

Je souhaite faire tourner cette image. Le niveau moyen de la rotation de l'image était de définir une rotation sur la toile objet de contexte. Cependant, qui fait tourner l'ensemble du jeu! Je ne veux pas le faire, et que vous souhaitez uniquement faire tourner cette un sprite. Comment dois-je faire?

De 18 000 points de vue et 4 upvotes...c'est un peu bizarre

OriginalL'auteur Razor Storm | 2011-09-21

  1. 11

    Utilisation .save() et .restore() (plus d'informations):

    link.onload=function(){
    ctx.save(); //save current state
    ctx.rotate(Math.PI); //rotate
    ctx.drawImage(link,x,y,20,20); //draws a chain link or dagger
    ctx.restore(); //restore original states (no rotation etc)
}
    Cool merci! Avez-vous une idée sur les maths pour refaire les dimensions de l'image quand je fais arbitraire de l'angle de rotation?
    Tempête: Vous avez besoin de traduire le milieu et de le traduire en arrière, mais vous avez réussi à le faire déjà que vous avez posté.
    Je crois qu'il est plus performant pour faire une rotation inverse après drawImage, au lieu de les sauvegarder et les restaurer.

    OriginalL'auteur pimvdb

  2. 5

    Vous pourriez vouloir mettre un translate(); là parce que l'image va tourner autour de l'origine et qui est dans le coin en haut à gauche par défaut si vous utilisez le translate(); pour modifier l'origine.

    link.onload=function(){
    ctx.save();
    ctx.translate(x, y); //change origin
    ctx.rotate(Math.PI);
    ctx.drawImage(link,-10,-10,10,10);
    ctx.restore()
}
    Hmm, les positions sont encore foiré
    ok, donc u ont une position u voulez dessiner une image qui sera (x, y). donc ce que tu veux faire, c'est de traduire l'origine (0, 0) à la position (x, y) de sorte que la position est maintenant (0, 0) u et dessiner ur droit à l'image sur le dessus de l'origine. donc, si ur de l'image est à 20 pixels de haut et de large ctx.drawImage(lien,-10,-10,10,10); et u sera en mesure de faire pivoter l'image autour de son centre.

    OriginalL'auteur Carb0n1c

  3. 2

    Ici j'ai fait un exemple de travail de l'un de mes jeux. u peut obtenir l'image de Ici.

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Test</title>
</head>
<body>
<canvas id="canvas" width="100" height="100"></canvas>
<script type="text/javascript">

var ctx = document.getElementById('canvas').getContext('2d');
var play = setInterval('Rotate()',16);
var i = 0;
var shipImg = new Image();
shipImg.src = 'ship.png';

function Rotate() {
  ctx.fillStyle = '#000';
  ctx.fillRect(0,0,100,100);

  ctx.save();
  ctx.translate(50, 50);
  ctx.rotate(i / 180 / Math.PI);
  ctx.drawImage(shipImg, -16, -16);
  ctx.restore();
  i += 10;
};

</script>
</body>
</html>

    OriginalL'auteur Carb0n1c

  4. 2

    Original de votre "solution" est:

    ctx.save();
ctx.translate(x,y);
ctx.rotate(-this.angle + Math.PI/2.0);
ctx.translate(-x, -y); 
ctx.drawImage(this.daggerImage,x,y,20,20);
ctx.restore();

    Cependant, il peut être rendu plus efficace (sans save ou restore) à l'aide de ce code:

    ctx.translate(x,y);
ctx.rotate(-this.angle + Math.PI/2.0);
ctx.drawImage(this.daggerImage,x,y,20,20);
ctx.rotate(this.angle - Math.PI/2.0);
ctx.translate(-x, -y);
    Oh, sympa! Je vais l'utiliser dans mon jeu.

    OriginalL'auteur Doorknob

  5. 1

    J'ai fini par avoir à faire: 

    ctx.save();
ctx.translate(x,y);
ctx.rotate(-this.angle + Math.PI/2.0);
ctx.translate(-x, -y); 
ctx.drawImage(this.daggerImage,x,y,20,20);
ctx.restore();
    vous avez juste besoin de la valeur x et y dans la première traduire et vous pouvez supprimer le second de traduire et d'arrêter de mettre les valeurs x et y dans le drawImage(); vous êtes juste de doubler les valeurs, au lieu drawImage(this.daggerImage,-10,-10,10,10);. Il n'y a plus d'infos sur developer.mozilla.org/en/Canvas_tutorial/Transformations sur ce genre de choses

    OriginalL'auteur Razor Storm