解説
ブレンドモードは、画像の合成方法です。描画モードや、合成モードなどとも呼ばれます。画像編集ソフトによく見られる機能です。
画像を合成する（重ね合わせる）際に、2つの画像の画素を、どのように計算して合成するか。その方法は、いろいろあります。単純に上の画像の画素だけを採用する方法。明るい方の画素を採用する方法。暗い方法の画素を採用する方法。そういった単純な方式だけでなく、計算によって画素を求める方法が多数存在しています。
- 上の画像の画素の値をX
- 下の画像の画素の値をY
- 画素の値を0～1とする
通常の合成
計算式 x
比較（暗）
計算式 x < y ? x : y
比較（明）
計算式 x > y ? x : y
有名な方法としては、暗くなる乗算、明るくなるスクリーンなどがあります。
乗算
計算式 x * y
スクリーン
計算式 1 - (1 - x) * (1 - y)
サンプル
ブレンドモードを体験するコードを、JavaScriptで簡単に書いてみます（※このソースコードはUTF-8形式で保存してください）。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>「ブレンドモード」のサンプル</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script type="text/javascript">
// 変数の初期化
var sz = 5, SZ = sz * sz * 3;
var bg = [];
for (var i = 0; i < SZ;) {
bg[i] = 0 + (255 * i / SZ) | 0; i ++;
bg[i] = 0 + (255 * i / SZ) | 0; i ++;
bg[i] = 0 + (255 * i / SZ) | 0; i ++;
}
var frnt = [];
for (var i = 0; i < SZ;) {
frnt[i] = (255 * i / sz) % 256 | 0; i ++;
frnt[i] = (127 * i / sz) % 256 | 0; i ++;
frnt[i] = ( 63 * i / sz) % 256 | 0; i ++;
}
// 比較(暗)
var dark = [];
for (var i = 0; i < SZ; i ++) {
dark[i] = bg[i] < frnt[i] ? bg[i] : frnt[i];
}
// 比較(明)
var light = [];
for (var i = 0; i < SZ; i ++) {
light[i] = bg[i] > frnt[i] ? bg[i] : frnt[i];
}
// 乗算
var mlt = [];
for (var i = 0; i < SZ; i ++) {
mlt[i] = (bg[i] * frnt[i] / 255) | 0;
}
// スクリーン
var scrn = [];
for (var i = 0; i < SZ; i ++) {
var b = bg[i] / 255;
var f = frnt[i] / 255;
scrn[i] = ((1 - (1 - b) * (1 - f)) * 255) | 0;
}
// DOM準備後に出力
$(function() {
out(bg, "背景");
out(frnt, "前景");
out(dark, "比較(暗)");
out(light, "比較(明)");
out(mlt, "乗算");
out(scrn, "スクリーン");
});
// 出力用関数
function out(arr, nm) {
// canvasを作成
var cnvs = $('<canvas width=5 height=5>').get(0);
var ctx = cnvs.getContext("2d");
// 画素の取得
var idt = ctx.getImageData(0, 0, sz, sz);
var d = idt.data;
// 描画
for (var i = 0; i < 25; i ++) {
var P = i * 4, p = i * 3;
d[P + 0] = arr[p + 0];
d[P + 1] = arr[p + 1];
d[P + 2] = arr[p + 2];
d[P + 3] = 255;
}
// 画素の反映
ctx.putImageData(idt, 0, 0);
// 表示
$("body")
.append($(cnvs).css({width: "50px", height: "50px"}))
.append(" " + nm + "<br>");
}
</script>
<style>
/* ドット絵風表示 */
canvas {
-ms-interpolation-mode:nearest-neighbor;
image-rendering:-webkit-optimize-contrast;
image-rendering:-moz-crisp-edges;
image-rendering:-o-crisp-edges;
image-rendering:pixelated;
}
</style>
</head>
<body></body>
</html>
