Je veux juste faire pivoter et déplacer l'image !! (Javascript, <canvas>, html 5)

Question

http://gist.github.com/232194

Je sais qu'il est quelque chose de mal avec mes transformations dans drawGuy. Quelqu'un peut-il m'aider à comprendre comment faire pivoter juste l'image? Actuellement, il tourne bien, mais je quelque chose avec les transformations est déformant, de sorte qu'il ne suit pas la souris correctement.

Answer 1

Au lieu de traduire vers l'avant puis vers l'arrière traduire à nouveau, il suffit de pousser votre état actuel sur la pile avant de traslate/faites tourner, et quand vous avez terminé - pop retour votre état de la pile. C'est ainsi que la plupart des applications graphiques utilisent des translations/rotations. De plus, vous traduisez par x, y, puis en appelant ctx.drawImage(guy, x, y). Cela va, en effet, doubler le décalage. Je soit se débarrasser de l'appel à traduire ou modifier les arguments de position pour l'appel drawImage à 0, 0.

function drawGuy() { 
    ctx.save();                               
    ctx.translate(x,y);  
    ctx.rotate(angle * Math.PI/180);                    
    ctx.drawImage(guy, 0, 0); 
    ctx.restore();            
}

Découvrez les spécifications à propos context.save() et context.restore() (la toile de façon fait push/pop état), here.