javascript - html5 canvas rotate and move issue -


i trying rotate 180 degree , , move object. not works me . added in jsfiddle

var enemy = enemeis[i];  // 45 shows rotation, 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%, , move top bottom . i'm lost here , appreciate help.

i fixed 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, is:

  • moves origin of coordinate system center of enemy image
  • rotates around point
  • moves origin point before

Comments

Popular posts from this blog

php - cannot display multiple markers in google maps v3 from traceroute result -

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

javascript - firefox memory leak -