グラデーションと半透明

グラデーション処理と、画像を重ね合わせた場合の半透明な画像の描画について説明します。

グラデーション処理

グラデーションはある色からある色へ徐々に色を変化させる処理の事です。
グラデーション処理では2つの色のRGBの割合を徐々に変化させていきます。
例えば下のような一番左端が赤、右端が青のグラデーションを描画する場合、左端からの距離に比例して赤と青の色の割合を以下の表のように変化させて合計します。
この表からわかるように、グラデーション処理は四則演算（＋−×÷）だけを使って行うことができます。
なお、左端からの距離は、一番左端の位置を 0%、中間の位置を 50%、右端の位置を 100% とした値を表します。
また、表の計算結果は小数点以下を切り捨てています。

下図では下のスライダーを操作することで、左端と右端を好きな色に設定したグラデーションを表示します。
また、グラデーションの上でマウスを移動させることで、その位置の情報をその下の表に表示します。
グラデーションの下に表示される三角形がマウスの位置を表します。

グラデーションには上記の例のように左右方向に色を変化させるだけでなく、上下方向や円の形をしたグラデーションなど様々なバリエーションがあります。
下の左の図は正方形の4隅に左上から順番にそれぞれ「赤」、「緑」、「青」、「黒」を設定したグラデーションです。
下の右の図は中心を「青」、円の端を「赤」に設定した円形のグラデーションです。

半透明処理

半透明処理では、2つの画像を重ね合わせて描画する際に、上の画像を半透明に表示することによって下の画像が透けて見えるように画像を描画します。
下の図は様々な透明度で2つの画像を重ね合わせて描画した図です。

元の画像	透明度25%の画像	透明度50%の画像	透明度75%の画像	透明度100%の画像

半透明処理は実はグラデーション処理と全く同じ計算によって行うことができます。
重ね合わせた画像のうち、上の画像の点の色を「グラデーション処理の左端の色」、下の画像の点の色を「グラデーション処理の右端の色」と考えてください。
透明度が 0%、つまり全く透けていない状態ではグラデーションの左端からの距離が 0% の色（＝上の画像の点の色）を描画します。
透明度が 100%、つまり完全に透明な状態ではグラデーションの左端からの距離が 100% の色（＝下の画像の点の色）を描画します。
透明度が 50% の場合は、グラデーションの中間の点の色を描画します。
このことをまとめると以下のようになります。

透明度が ｘ% の場合はグラデーションの左端からの距離が ｘ% の色を描画する。

従って、半透明処理は画像の各点において、グラデーション処理と同じ計算を行うことで行えます。
つまり、半透明処理もグラデーション処理と同様に四則演算（＋−×÷）だけを使って行うことができます。