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
Post a Comment