canvas学習ノート-図形描画座標系
519 ワード
1.座標系
キャンバスの左上隅(0,0)の既定の原点
(画像はmdnから)
しかし、Canvasの座標系は一塵も変わらないものではなく、原点は変えることができる.
座標変換:Canvas座標システムの移動translate、回転rotate、スケールなどの操作ができます.
座標変換後に描画されるグラフィックx,yオフセット量は、いずれも新しい原点を基準とし、回転角度、スケール比は、新しい座標系角度を基準とする
例えば同じように原点位置に文字(x:0,y:0)を書き、(0,50)位置に矩形を描き、座標変換前後の効果は以下の通りです.
このように、複数の図形を描画する場合、x,yオフセット量を計算することによって図形の表示位置を制御することも、座標を変換することによって行うこともできる.
座標変換は
座標の例
キャンバスの左上隅(0,0)の既定の原点
x
座標が右向きに増加し、y
座標は下方に延びる(画像はmdnから)
しかし、Canvasの座標系は一塵も変わらないものではなく、原点は変えることができる.
座標変換:Canvas座標システムの移動translate、回転rotate、スケールなどの操作ができます.
座標変換後に描画されるグラフィックx,yオフセット量は、いずれも新しい原点を基準とし、回転角度、スケール比は、新しい座標系角度を基準とする
例えば同じように原点位置に文字(x:0,y:0)を書き、(0,50)位置に矩形を描き、座標変換前後の効果は以下の通りです.
このように、複数の図形を描画する場合、x,yオフセット量を計算することによって図形の表示位置を制御することも、座標を変換することによって行うこともできる.
座標変換は
Canvasプロットのスタックに存在し、save,restore
座標系のリセットまたは更新座標の例