FC2ブログ

HTML5 Canvasの変換マトリックスについて解説してみる

Canvasの transform() メソッドでは、変換マトリックス(Transformation matrix)の変更ができる。
リファレンスでは変換マトリックスの説明が無かったので調べてみた。
なお、Transformation matrix を「変形マトリックス」と訳しているところもある。
参考サイト:Transformation matrix - Wikipedia (日本語版は見つけられませんでした)

1. 変換マトリックスの意味
Canvasの変換マトリックスは、以下の行列で表される。
Canvasの変換マトリックス
変換前の座標を(x,y)、変換後の座標を(x',y')とすると、変換式は以下のようになる。
Canvasの変換マトリックス変換式1
これを展開すると、
Canvasの変換マトリックス変換式2
となる。

つまり、Canvasの変換マトリックスは、(x,y)に2×2マトリックス
2×2変換マトリックス
を適用し、更に x軸方向にdx、y軸方向にdyだけ移動することを表している。

setTransform() メソッドでは、既存の変換マトリックスが廃棄されて引数の行列で初期化される。
transform() メソッドでは、既存の変換マトリックスに対して引数の行列を掛けることで変換マトリックスが更新される。

2. 2×2マトリックスの例
変換マトリックス左上の2×2マトリックスの、簡単な例を示す
(1)回転
座標(0,0)を中心として、時計回りにθ回転する場合
2×2マトリックス回転
sinの符号が逆だと思うかもしれないが、Canvasではy軸が下向きのためこうなる。

(2)拡大縮小
x軸方向にSx倍、y軸方向にSy倍する場合
2×2マトリックス拡大縮小

(3)無変換
何も変換しない場合
2×2マトリックス無変換
dx,dyだけを指定したいときはこれを使用する

行列演算による変換マトリックスの作り方なども書きたいのだが、自分の理解が足りないためここまで。
スポンサーサイト



コメント

コメントの投稿

非公開コメント

プロフィール

himax64

Author: 南西
30代後半の無職です。
就活もせずダラダラ生きてます。
作ったもの

最新記事
人気記事
検索フォーム
カテゴリ
月別アーカイブ
最新コメント
最新トラックバック
RSSリンクの表示
QRコード
QRコード
カウンター