Question

我正在尝试旋转180度，并移动物体。但这不适合我。我在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++;

我希望敌人的虫子旋转180％，并从上到下移动。我真的迷失在这里，并希望得到一些帮助。

Answer 1

我为你修好了：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++;

基本上，它的作用是：

将坐标系的原点移动到敌方图像的中心
围绕该点旋转
将原点移回到之前的位置

html5画布旋转和移动问题

1 个答案: