無職のプログラミング HTML5 Canvasの変換マトリックスについて解説してみる
Canvasの transform() メソッドでは、変換マトリックス(Transformation matrix)の変更ができる。 リファレンスでは変換マトリックスの説明が無かったので調べてみた。 なお、Transformation matrix を「変形マトリックス」と訳しているところもある。 参考サイト：Transformation matrix - Wikipedia (日本語版は見つけられませんでした) 1. 変換マトリックスの意味 Canvasの変換マトリックスは、以下の行列で表される。 変換前の座標を(x,y)、変換後の座標を(x',y')とすると、変換式は以下のようになる。 これを展開すると、 となる。 つまり、Canvasの変換マトリックスは、(x,y)に２×２マトリックス を適用し、更に x軸方向にdx、y軸方向にdyだけ移動することを表している。 setTransfo
無職のプログラミング [HTML5 Canvas]変形メソッド scale(),rotate(),translate() の実行順序
[HTML5 Canvas]変形メソッド scale(),rotate(),translate() の実行順序 HTML5のCanvasには、scale(),rotate(),translate() という変形用メソッドがあり、それぞれ 伸縮、回転、移動 を行う。 （それ以外の変形用メソッドとして、汎用メソッドtransform()がある） 期待した図形を作成するための、変形用メソッド実行順序について解説する。 1. 変形の順序が変わればできる図形も変わる 図形を変形させる場合、順序に注意する必要がある。 例えば、長方形に 座標(0,0)を中心として時計回りに30度回転 → x軸方向に20, y軸方向に10移動 → x軸方向に2倍, y軸方向に1.5倍する という変形を行うと、以下のように変形していく。図形左上の×印は座標(0,0)を示す。 逆順に、 x軸方向に2倍, y軸方向に1.5倍
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
