幾何学的変換

HTML5用語集

カテゴリー: transform()メソッド  閲覧数:373 配信日:2014-05-15 16:16


概要


デジタルオブジェクトは画素の集合だから、画素1つ1つに対して処理を行えば、平行移動、拡大・縮小、回転させることは可能
・画素の位置 … (x, y)


平行移動


計算式
・tx … x方向への移動量
・ty … y方向への移動量
・全画素分下記計算を繰り返せば、オブジェクトの平行移動が可能
x' = x + tx
y' = y + ty
・上記計算式は行列を用いることで1つにまとめることが可能







拡大・縮小


計算式
・sx … x方向への拡大
・sy … y方向への拡大量
・全画素分下記計算を繰り返せば、オブジェクトの拡大・縮小が可能
x' = sx × x
y' = sy × y

・上記計算式は行列を用いることで1つにまとめることが可能
・拡大縮小行列







回転


計算式
・θ … 回転する角度
・sin … 三角関数のサイン
・cos … 三角関数のコサイン
・全画素分下記計算を繰り返せば、オブジェクトの回転が可能

(変換後の x 座標) = (変換前の x 座標)×cosθ - (変換前の y 座標)×sinθ
x' = xcosθ - ysinθ

(変換後の y 座標) = (変換前の x 座標)×sinθ + (変換前の y 座標)×cosθ
y' = xsinθ + ycosθ
・上記計算式は行列を用いることで1つにまとめることが可能
・拡大縮小行列






【極座標とは】
・平面上の点を,原点からの距離rと始線(x軸の正の向き)からの偏角θの組(r, θ)で表したもの
・原点からの距離(r)と偏角(θ)からなる座標のこと
・「距離と角度」で表される座標

・平面上の1点を極と定め、その点から半直線を一本引く
・この半直線を始線と定め、平面上の点を(点から極までの距離,点と極を結んだ直線と始線がなす角度ラジアン)という方法で表した(r,θ)


・極は原点、始線はx軸の正の側、角度はy軸の正の向きに向かった動径、とそれぞれ同一視

指定期間人気ページランキング / 2020-5-29 → 2024-4-19
順位 ページタイトル抜粋 アクセス数
1 シェーダー | compileShader()メソッド(WebGLRenderingContext) 1384
2 フォーム | その他 804
3 VBO | WebGLRenderingContext 218
4 new Image() | new Image()オブジェクト生成(HTMLImageElementインターフェイス) 158
5 HTML5用語 146
6 アフィン変換 | transform()メソッド(CanvasRenderingContext2D ) 143
7 localStorage | localStorageプロパティ(HTMLStorageオブジェクト) 119
8 createLinearGradient() メソッド | createLinearGradient()メソッド(CanvasRenderingContext2D ) 114
9 localStorageプロパティ(HTMLStorageオブジェクト) カテゴリー 93
10 localStorageプロパティ(HTMLStorageオブジェクト) カテゴリー 89
11 now()メソッド(Performanceインターフェイス) カテゴリー 85
12 drawImage() メソッド | drawImage()メソッド(CanvasRenderingContext2D ) 84
13 getContext()メソッド(HTMLCanvasElement) カテゴリー 81
14 setItem()メソッド(HTMLStorageオブジェクト) カテゴリー 80
15 new Image()オブジェクト生成(HTMLImageElementインターフェイス) カテゴリー 77
15 saveメソッドとrestoreメソッドを使用して、オリジナルのスケールへ戻す 77
15 「線形グラデーションで塗りつぶした四角形」を描画するためには? 77
16 globalAlphaプロパティ(CanvasRenderingContext2D ) カテゴリー 76
17 drawImage()メソッド(CanvasRenderingContext2D ) カテゴリー 74
18 transform()メソッド(CanvasRenderingContext2D ) カテゴリー 72
2024/4/20 1:01 更新