解説
マスクは、マスク画像のような言葉で使わます。マスキングテープで色を塗る範囲を限定するように、マスク画像を使い、黒い部分を切り抜いた画像を作成します。
現代では、グレースケールの画像が利用されることが多く、アルファチャンネル（透明度）を持つ画像と似たような概念です。
古いゲームなどでは、白黒2値のマスク画像を用意しておき、高速に背景をくりぬき、キャラクターの画像などを合成していました。以下、例を示します。
背景画像 マスク画像 前景画像 88888888 FF0000FF 00AAAA00 88888888 F000000F 0AAAAAA0 88888888 F000000F 0AAAAAA0 88888888 FF0000FF 00AAAA00 ↓ 背景画像とマスク画像をアンド演算して 背景をくりぬいた画像を作る 88000088 80000008 80000008 88000088 ↓ 背景くりぬき画像と前景画像をオア演算して 高速に合成する 88AAAA88 8AAAAAA8 8AAAAAA8 88AAAA88
サンプル
マスクを体験するコードを、JavaScriptで簡単に書いてみます（※このソースコードはUTF-8形式で保存してください）。
高速に演算するなら「bg[i] & msk[i] | frnt[i]」とすればよいのですが、過程が分かるようにループを2回まわしています。
<!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 R = [255, 0, 0];
var G = [ 0,255, 0];
var B = [ 0, 0, 0];
var W = [255,255,255];
var bg = [].concat(
R,R,R,R,R,
R,R,R,R,R,
R,R,R,R,R,
R,R,R,R,R,
R,R,R,R,R
);
var msk = [].concat(
W,W,B,W,W,
W,B,B,B,W,
B,B,B,B,B,
W,B,B,B,W,
W,W,B,W,W
);
var frnt = [].concat(
B,B,G,B,B,
B,G,G,G,B,
G,G,G,G,G,
B,G,G,G,B,
B,B,G,B,B
);
var res1 = [], res2 = [];
// 背景とマスクをアンド演算(res1)
for (var i = 0; i < SZ; i ++) {
res1[i] = bg[i] & msk[i];
}
// res1と前景画像をオア演算
for (var i = 0; i < SZ; i ++) {
res2[i] = res1[i] | frnt[i];
}
// DOM準備後に出力
$(function() {
out(bg, "背景画像");
out(msk, "マスク画像");
out(frnt, "前景画像");
out(res1, "背景とマスクをアンド演算(res1)");
out(res2, "res1と前景画像をオア演算");
});
// 出力用関数
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>
