CODEWITHSUNDEEP
javascripthtmlcanvas
rab
rab

Reputation: 4144

html5 canvas rotate and move issue

I am trying rotate 180 degree , and move object. But this not works for me . I added it in jsfiddle

var enemy = enemeis[i];

// 45 shows some rotation, I want 180%               
var rangle =  45 * Math.PI/180 ;
ctx.save();

ctx.translate( enemy.x, enemy.y );
ctx.rotate( rangle );
ctx.drawImage( enemy.el , enemy.x , enemy.y );

ctx.restore();                    

enemy.y++;

I want enemy bug rotate 180%, and move top to bottom . I'm really lost here and would appreciate some help.

Upvotes: 0

Views: 149

Answers (1)

nubbel
nubbel

Reputation: 1582

I fixed it for you: http://jsfiddle.net/nubbel/DVpWL/3/

var enemy = enemeis[i];

var rangle =  Math.PI ;
ctx.save();

var offsetX = enemy.x + enemy.el.width/2.0;
var offsetY = enemy.y + enemy.el.height/2.0;

ctx.translate( offsetX, offsetY );
ctx.rotate( rangle );
ctx.translate( -offsetX, -offsetY );

ctx.drawImage( enemy.el , enemy.x , enemy.y );

ctx.restore();                    

enemy.y++;

Basically, what it does is:

  • moves the origin of the coordinate system to the center of the enemy image
  • rotates around that point
  • moves the origin back to the point it was before

Upvotes: 1

Related Questions