2dコンテキストを使用しているときにHTML5キャンバスのcontext.fillRectの原点を決定するものは何ですか？

Question

私はキャンバスに複数のbitmapSequenceオブジェクトを持つeaselJSライブラリを使用しています。私は間違った質問をしているかもしれません、なぜなら私はこの仕組みが理解できないからです。私はできる限り私の状況を明確に説明しようとします。

私はキャンバスに複数のbitmapSequenceオブジェクト（スプライトアニメーションシーケンス）を配置し、xおよびyプロパティを設定することによってグローバルtick（）関数内でそれらを移動します。 xプロパティとyプロパティを設定したら、stage.update（）を呼び出します。これは、キャンバスとすべてのbitmapSequenceオブジェクトを新しい場所に再描画します。

stage.update（）コールの後でもtick（）関数内で、変数ctxをcanvas.getContext（ '2d'）に割り当てます。次に、私はctx.fillRect（0、0、8、8）を呼び出します。この場合、fillRect ALWAYSの0,0（x、y）引数は、stage.update（）呼び出しの前にxおよびy属性を変更した最後のbitmapSequenceオブジェクトの原点を表します。

これは、0,0で四角形を描くと、使用した最後のbitmapSequenceオブジェクトの起点に表示され、移動するときにbitmapSequenceに従うことを意味します）。

2dコンテキストを取得しようとすると、stage.update（）の前に四角形を描画するとキャンバスに表示されません。

理想的には、私が望む任意のbitmapSequenceオブジェクトの原点を基準に矩形を描くことができるようにしたいと考えています。私が誤解していることを理解するのを助けてください。

Answer 1

私が代わりにこれを達成するためにeaselJSのコンテナオブジェクトを使用することができました：

別の方法としては、相対的な描画の「開始点」を変更することができます。私はコンテナにオブジェクトを追加することができ、コンテナ内のオブジェクトはコンテナと共に移動しました。コンテナ内のオブジェクトはコンテナを基準にしたx/y座標を持ち、コンテナはキャンバスに対してx/y座標を持ちました。それは私が期待したのと同じように機能しました。

私はまだ、easelJSと組み合わせて2Dコンテキストが何であるのか分かりません。

Answer 2

おそらくtranslate()の機能をお探しですか？プログラムの動作は、その関数の動作に対応します。したがって、相対描画をリセットする場合は、ctx.translate(-x_of_last_bitmapSequence, -y_of_last_bitmapSequence)を使用してください。

ctx.save(); 
ctx.translate(x, y); 

ctx.strokeRect(0, 0, 30, 30) // strokes a square at coords [x, y] 

ctx.restore(); // restores the original state (relative coords are at [0, 0])