内容
状態:-
閲覧数:597
投稿日:2016-08-26
更新日:2016-09-14
変換マトリックスを、引数で指定した行列へ変更
現在の変換マトリックスをリセットして、指定した変換マトリックスで変形する
・「現在の座標」に対して、「引数で指定した行列」を掛け合わせると、「変形された新しい座標」が得られる
※一方、transform()メソッドは、現在の変換マトリックスをリセットせず、そこからさらに指定した変換マトリックスで変形する
変換マトリックス
・図形やパスが生成される際、座標に適用される
第1引数 … a
・伸縮x
・水平方向の伸縮倍数（変形しない場合は1）
第2引数 … b
・傾斜y
・垂直方向の傾斜率（変形しない場合は0）
第3引数 … c
・傾斜x
・水平方向の傾斜率（変形しない場合は0）
第4引数 … d
・伸縮y
・垂直方向の伸縮倍数（変形しない場合は1）
第5引数 … e
・移動x
・水平方向の移動距離（変形しない場合は0）
第6引数 … f
・移動y
・垂直方向の移動距離（変形しない場合は0）
HTML Canvas 2D Context
setTransform(a, b, c, d, e, f)
CanvasRenderingContext2D.setTransform()
アフィン変換
canvasでグラフィックスの変形をしよう （拡大・回転・移動・反転など）
Changes the transformation matrix to the matrix given by the arguments as described below.
現在の変換マトリックスをリセットして、指定した変換マトリックスで変形する
・「現在の座標」に対して、「引数で指定した行列」を掛け合わせると、「変形された新しい座標」が得られる
※一方、transform()メソッドは、現在の変換マトリックスをリセットせず、そこからさらに指定した変換マトリックスで変形する
変換マトリックス
・図形やパスが生成される際、座標に適用される
構文
void ctx.setTransform(a, b, c, d, e, f);
| X´ | | | a | c | e | | | X | ||
|---|---|---|---|---|---|---|---|---|
| Y´ | = | | | b | d | f | | | × | Y |
| 1 | | | 0 | 0 | 1 | | | 1 |
・伸縮x
・水平方向の伸縮倍数（変形しない場合は1）
第2引数 … b
・傾斜y
・垂直方向の傾斜率（変形しない場合は0）
第3引数 … c
・傾斜x
・水平方向の傾斜率（変形しない場合は0）
第4引数 … d
・伸縮y
・垂直方向の伸縮倍数（変形しない場合は1）
第5引数 … e
・移動x
・水平方向の移動距離（変形しない場合は0）
第6引数 … f
・移動y
・垂直方向の移動距離（変形しない場合は0）
HTML Canvas 2D Context
setTransform(a, b, c, d, e, f)
CanvasRenderingContext2D.setTransform()
アフィン変換
canvasでグラフィックスの変形をしよう （拡大・回転・移動・反転など）