描画内容

HTML5用語集

カテゴリー: transform()メソッド  閲覧数:475 配信日: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


指定期間人気ページランキング / 2020-5-29 → 2025-6-3
順位 ページタイトル抜粋 アクセス数
1 シェーダー | compileShader()メソッド(WebGLRenderingContext) 1452
2 フォーム | その他 940
3 HTML5用語 250
4 VBO | WebGLRenderingContext 239
5 new Image() | new Image()オブジェクト生成(HTMLImageElementインターフェイス) 170
6 アフィン変換 | transform()メソッド(CanvasRenderingContext2D ) 164
7 localStorage | localStorageプロパティ(HTMLStorageオブジェクト) 129
8 createLinearGradient() メソッド | createLinearGradient()メソッド(CanvasRenderingContext2D ) 115
9 drawImage() メソッド | drawImage()メソッド(CanvasRenderingContext2D ) 108
10 localStorageプロパティ(HTMLStorageオブジェクト) カテゴリー 99
11 localStorageプロパティ(HTMLStorageオブジェクト) カテゴリー 98
12 now()メソッド(Performanceインターフェイス) カテゴリー 92
13 getContext()メソッド(HTMLCanvasElement) カテゴリー 91
14 saveメソッドとrestoreメソッドを使用して、オリジナルのスケールへ戻す 87
15 「線形グラデーションで塗りつぶした四角形」を描画するためには? 86
16 globalAlphaプロパティ(CanvasRenderingContext2D ) カテゴリー 85
17 drawImage()メソッド(CanvasRenderingContext2D ) カテゴリー 84
17 new Image()オブジェクト生成(HTMLImageElementインターフェイス) カテゴリー 84
18 drawImage()メソッド(CanvasRenderingContext2D ) カテゴリー 83
18 setItem()メソッド(HTMLStorageオブジェクト) カテゴリー 83
2025/6/4 1:01 更新