描画内容

HTML5用語集

カテゴリー: transform()メソッド  閲覧数:449 配信日: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-3-9
順位 ページタイトル抜粋 アクセス数
1 シェーダー | compileShader()メソッド(WebGLRenderingContext) 1449
2 フォーム | その他 939
3 VBO | WebGLRenderingContext 233
4 HTML5用語 230
5 new Image() | new Image()オブジェクト生成(HTMLImageElementインターフェイス) 167
6 アフィン変換 | transform()メソッド(CanvasRenderingContext2D ) 160
7 localStorage | localStorageプロパティ(HTMLStorageオブジェクト) 127
8 createLinearGradient() メソッド | createLinearGradient()メソッド(CanvasRenderingContext2D ) 115
9 drawImage() メソッド | drawImage()メソッド(CanvasRenderingContext2D ) 102
10 localStorageプロパティ(HTMLStorageオブジェクト) カテゴリー 98
10 localStorageプロパティ(HTMLStorageオブジェクト) カテゴリー 98
11 getContext()メソッド(HTMLCanvasElement) カテゴリー 90
12 now()メソッド(Performanceインターフェイス) カテゴリー 89
13 saveメソッドとrestoreメソッドを使用して、オリジナルのスケールへ戻す 86
14 globalAlphaプロパティ(CanvasRenderingContext2D ) カテゴリー 84
14 「線形グラデーションで塗りつぶした四角形」を描画するためには? 84
15 drawImage()メソッド(CanvasRenderingContext2D ) カテゴリー 83
15 new Image()オブジェクト生成(HTMLImageElementインターフェイス) カテゴリー 83
15 setItem()メソッド(HTMLStorageオブジェクト) カテゴリー 83
16 drawImage()メソッド(CanvasRenderingContext2D ) カテゴリー 82
2025/3/10 1:01 更新