2012-02-13 4 views
2

私は定期的にcanvas要素(状況のゲーム種類を)リフレッシュする機能を持っています。キャンバスの描画コンテキストを絶対値で回転させる方法はありますか?

描かれた目的の一つは、回転させることができるようになっている:

myObject = {}; 
... 
myObject.radian = 0.75; 
... 

私が今直面しています問題は、私が行って、私の描画ルーチンにこの回転を適用するときにということである。

ctx.moveTo(CANVAS_WIDTH/2, CANVAS_HEIGHT/2); 
ctx.rotate(myObject.radian); 
ctx.drawImage(... 

これは回転の絶対値を設定するが、最後のフレームを処理するときに使用される値に加算しません。私は昔の回転値にアクセスすることにより、デルタを計算することができれば、これは何の問題もないだろうが、私はconsole.log(ctx)ときには、接続された任意の回転情報を持っていないようです。

私のオブジェクトの回転を設定することができるという、代わりにデルタで動作するようになるという考えを取り除く以外、これを行う方法はありますか?ありがとう!

答えて

1

http://sgdk2.enigmadream.com/ben/Mobile.htmlで示されているように、コンテキストのアクティブな状態に対して描画を実行できるように、コンテキストの保存と復元の機能を使用して描画関数を囲むことができます完了したら期待どおりの状態に戻ります。コンテキストを他の操作のための未知の状態にすることはありません。

XFrame.prototype.draw = function(ctx, x, y) { 
    ctx.save(); 
    ctx.transform(this.m11, this.m12, this.m21, this.m22, this.dx+x, this.dy+y); 
    ctx.drawImage(this.imageSource, (this.cellIndex % this.graphicSheet.columns) * this.graphicSheet.cellWidth, 
     Math.floor(this.cellIndex/this.graphicSheet.columns) * this.graphicSheet.cellHeight, 
     this.graphicSheet.cellWidth, this.graphicSheet.cellHeight, 0, 0, this.graphicSheet.cellWidth, this.graphicSheet.cellHeight); 
    ctx.restore(); 
}; 
関連する問題