描画内容

HTML5用語集

カテゴリー: transform()メソッド  閲覧数:602 配信日:2014-05-08 11:09


平行移動


X軸方向にdx、Y軸方向にdy平行移動させる変換行列
・これはtranslate(dx, dy)の効果と同じ
1 0 dx
0 1 dy
0 0 1


Y軸反転


Y軸に対する鏡像変換(ミラー)
-1 0 0
0 1 0
0 0 1
結果的に、
 X'= -x
 Y'= y
へ変換されることになる

計算式
・(x×-1)+(x×0)+(x×0)=-x
・(y×0)+(y×1)+(y×0)=y



拡大縮小


X軸方向にdx倍、Y軸方向にdy倍する変換行列
・これはscale(dx, dy)の効果と同じ
dx 0 0
0 dy 0
0 0 1


回転


原点を中心にθラジアン回転する変換行列
・これはrotate(θ)の効果と同じ
cosθ sinθ 0
-sinθ -cosθ 0
0 0 1
原点以外の点(x, y)を中心にθラジアン回転する変換行列
・これはtranslate(x, y)とrotate(θ)を連続して使用した場合の効果と同じ
cosθ sinθ x(1-θ)+y(sinθ)
-sinθ -cosθ x(-sinθ)+y(1-cosθ)
0 0 1


傾斜


点(x, y)を傾斜に中心にX軸に沿ってΘ、Y軸に沿ってΦ傾斜させる変換行列
・他のメソッドでは表現できない
1 tanΦ -y(tanΘ)
tanΘ 1 -x(tanΦ)
0 0 1


週間人気ページランキング / 8-31 → 9-6
順位 ページタイトル抜粋 アクセス数
1 HTML5用語 2
2 遭遇例 / 確認例 1
2 fill()メソッド(CanvasRenderingContext2D ) カテゴリー 1
2026/9/7 5:05 更新
指定期間人気ページランキング / 2020-5-29 → 2026-9-6
順位 ページタイトル抜粋 アクセス数
1 シェーダー | compileShader()メソッド(WebGLRenderingContext) 1463
2 フォーム | その他 955
3 HTML5用語 456
4 VBO | WebGLRenderingContext 259
5 アフィン変換 | 「transform()メソッド(CanvasRenderingContext2D )」カテゴリー | HTML5用語 186
6 new Image() | new Image()オブジェクト生成(HTMLImageElementインターフェイス) 183
7 localStorage | localStorageプロパティ(HTMLStorageオブジェクト) 137
8 drawImage() メソッド | drawImage()メソッド(CanvasRenderingContext2D ) 128
9 createLinearGradient() メソッド | createLinearGradient()メソッド(CanvasRenderingContext2D ) 118
10 localStorageプロパティ(HTMLStorageオブジェクト) カテゴリー 107
10 localStorageプロパティ(HTMLStorageオブジェクト) カテゴリー 107
11 getContext()メソッド(HTMLCanvasElement) カテゴリー 101
12 now()メソッド(Performanceインターフェイス) カテゴリー 100
13 new Image()オブジェクト生成(HTMLImageElementインターフェイス) カテゴリー 97
14 globalAlphaプロパティ(CanvasRenderingContext2D ) カテゴリー 95
15 ログイン 94
16 drawImage()メソッド(CanvasRenderingContext2D ) カテゴリー 93
16 saveメソッドとrestoreメソッドを使用して、オリジナルのスケールへ戻す 93
16 「線形グラデーションで塗りつぶした四角形」を描画するためには? 93
17 rect()メソッド(CanvasRenderingContext2D ) カテゴリー 92
2026/9/7 5:05 更新