setTransform()メソッド

CanvasRenderingContext2D setTransform()メソッド

内容

 状態:-  閲覧数:463  投稿日:2016-08-26  更新日:2016-09-14  
変換マトリックスを、引数で指定した行列へ変更
Changes the transformation matrix to the matrix given by the arguments as described below.

現在の変換マトリックスをリセットして、指定した変換マトリックスで変形する
・「現在の座標」に対して、「引数で指定した行列」を掛け合わせると、「変形された新しい座標」が得られる
※一方、transform()メソッドは、現在の変換マトリックスをリセットせず、そこからさらに指定した変換マトリックスで変形する

変換マトリックス
・図形やパスが生成される際、座標に適用される


構文


void ctx.setTransform(a, b, c, d, e, f);
  | a c e |   X
= | b d f | × Y
1   | 0 0 1 |   1
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でグラフィックスの変形をしよう (拡大・回転・移動・反転など)


コメント投稿(ログインが必要)