Comment pourrait-on faire pivoter une image sur elle-même avec Canvas?

Question

Je ne parviens pas à déplacer une image autour de lui à l'aide de Canvas.

Etant donné que vous ne pouvez pas faire pivoter une image, vous devez faire pivoter la toile: si je la fait pivoter d’un degré, l’origine autour de laquelle je souhaite faire pivoter les modifications. Je ne comprends pas comment suivre ce changement.

Voici mon code actuel: http://pastie.org/669023

Et une démonstration est disponible sur http://preview.netlashproject.be/cog/

Si vous voulez essayer le code compressé et l'image, reportez-vous à http: / /preview.netlashproject.be/cog/cog.zip

Answer 1

J'ai corrigé votre code:

var rotation = 0;
function draw(){

  var ctx = document.getElementById('myCanvas').getContext('2d');
  ctx.globalCompositeOperation = 'destination-over';

  ctx.save();
  ctx.clearRect(0,0,200,200);
  ctx.translate(100,100); // to get it in the origin
  rotation +=1;
  ctx.rotate(rotation*Math.PI/64); //rotate in origin
  ctx.translate(-100,-100); //put it back
  ctx.drawImage(cog,0,0);
  ctx.restore();
}

La chose importante ici est que vous devez d'abord traduire l'image en origine avant de la faire pivoter, puis la traduire à nouveau!

Answer 2

il semble que cela pourrait être quelque chose que vous pourriez utiliser: http://wilq32.googlepages.com/ wilq32.rollimage222

en voici un test: http://www.antiyes.com/test/index .php