HTMLキャンバスで(翻訳)と)(回転が理解されています

我々はキャンバスページを初期化するときに最初に、キャンバストップを置くために、対応する、これは、我々は上に(下記参照)座標系を持っているキャンバスとして理解することができ、左上隅を原点、右方向をX軸正です、ダウンこの完全に基づいており、我々はカンバス座標系に描くもの正のY軸方向であり、時には我々は、図面の内容を調整する必要があり、例えば、回転の所定角度以上のパターン、又はグラフィックを描くキャンバスの中央には、我々は翻訳し、移動後に描画する前に、座標系を回転させることができます。

そこでは、回転の原点は回転基礎である回転,,それは重要です

1.png

機能とパラメータ説明
機能 パラメータ 説明
訳します DX、DX X軸とY軸距離におけるシステムの移動座標
回転 角度 回転角反時計回りの座標,,負正
セーブ 座標系の現在の状態を保存
リストア 最後の時間は、システム状態の回復を座標

我々が回転し、上記で四角形を描画し、キャンバスを移動しない場合は、このようなものです

2.png

3.png

我々はそれを右と下に移動した場合は、200pxのと100pxにを翻訳し、この時点でドローの左上隅に基づいていることがわかります

4.png

5.png

私たちはこの位置に描画したい場合には、座標系が回復した後、被写体の位置を座標我々はその上にグラフィックスを描画し続けるならば、まだ今、私たちは、座標系を移動し、キャンバスの位置が変更されていない、見ることができます元の場所は、我々は引き分けた後、リストア()の回復を呼び出し、状態を保存するために)(保存移動する前に呼び出す必要があります。

6.png

私たちが望む場合は矩形は、コードおよびレンダリングを見たいと思って、それを90度回転し始め、それ自体を中心に説明します

7.png

8.png

emmmm ...少しのずれが生じ、うまく計算し、それが自分のターン90°の中心にあるが、何も、rorate理解した上で、これらの二つの機能を理解し、翻訳し影響を与えません。ありません
座標系を行った後の赤のボックス内のコードの最初の行の最初の外観は、そのようなものです

9.png

コードの2行目は、のように回転した後

10.png

このときのX軸とY軸が変更されたメモと、正方向の向き。コードの3行目の後に実行します

11.png

  • なぜそれの右上に実行しますか?私たちが翻訳しているので引数が負であり、そしてトップは右とRANにあるように、この時点での正の方向は、左と下の軸であります
  • なぜキャンバス外に起源を使い果たすでしょうか?X軸は距離幅/ 2、および垂直方向のスペースの不足を移動するので、それは上がるし続けています。

最近、あまり説明する座標系で座標系を回転することにより、90°または180°、およびのこぎり多くのブログの中心として、絵自体の上にキャンバスに描画されるプロジェクトのニーズを行っているため、これらの二つの機能を説明するための写真は主ですただし、トラブルは、この2つの関数の後に座標系を理解するのに長い時間のためにしようとするのではなく、簡単なポイントの感じていることが分かりました。

おすすめ

転載: www.cnblogs.com/homehtml/p/11963714.html