Comment peut-on faire pivoter une image sur elle-même en utilisant Canvas?

Question

Je vais avoir du mal à roating une image sur elle-même en utilisant la toile.

Puisque vous ne pouvez pas faire pivoter une image que vous devez faire pivoter la toile: si je tourne la toile par un degré l'origine autour de laquelle je veux tourner des changements. Je ne comprends pas comment suivre ce changement.

Ceci est mon code actuel: http://pastie.org/669023

Et une démo est à http://preview.netlashproject.be/cog/

Si vous voulez donner des choses un coup le code compressé et l'image est à http://preview.netlashproject.be/cog/cog.zip

Answer 1

Je fixe 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(); 
} 

L'important ici est que vous devez traduire l'image à l'origine avant de tourner, et traduisez-les!

Answer 2

il ressemble à ceci pourrait être quelque chose que vous pouvez utiliser: http://wilq32.googlepages.com/wilq32.rollimage222

est ici un test de celui-ci: http://www.antiyes.com/test/index.php