2

ある角度に回転させてから、ある点でキャンバスに描画する必要のある画像があります。私は現在これを持っています：

var image = roach.image;
image.style.msTransform = 'rotate(' + roach.heading + 'deg)';
this.gameContext.drawImage(image, roach.position.x, roach.position.y);

これを編集して機能させるにはどうすればよいですか。roach.headingは、度単位で回転させたい角度です。

4

1 に答える 1

1

これを試して：

var image = roach.image,
    ctx = this.gameContext,
    widthHalf = Math.floor( image.width / 2 ),
    heightHalf = Math.floor( image.height / 2 );

ctx.save();

ctx.translate( roach.position.x, roach.position.y );
ctx.translate( widthHalf, heightHalf );
ctx.rotate( ( Math.PI / 180 ) * roach.heading );
ctx.drawImage( image, -widthHalf, -heightHalf );
ctx.restore();

jsfiddle： http: //jsfiddle.net/PwzEc/

于 2012-11-02T13:35:04.003 に答える