その48。
tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編
今回試すサンプルは「透明度・合成」の「合成タイプを設定しよう(source-atop)」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
赤の円と赤の円に重なってる部分だけが表示された緑と青の円が描画されたと思います。
/*
* 定数
*/
var SCREEN_WIDTH = 465;
var SCREEN_HEIGHT= 465;
tm.main(function() {
// canvas インスタンス生成
var canvas = tm.graphics.Canvas("#world");
// 幅, 高さを指定
canvas.resize(SCREEN_WIDTH, SCREEN_HEIGHT);
// 画面にフィットさせる
canvas.fitWindow();
// 円を描画
canvas.fillStyle = "rgb(255, 0, 0)";
canvas.fillCircle(230, 150, 100);
// グローバルαを指定
canvas.globalCompositeOperation = "source-atop";
// 円を描画
canvas.fillStyle = "rgb(0, 255, 0)";
canvas.fillCircle(180, 250, 100);
canvas.fillStyle = "rgb(0, 0, 255)";
canvas.fillCircle(280, 250, 100);
// 補助線
canvas.globalCompositeOperation = "source-over";
canvas.strokeStyle = "#aaa";
canvas.strokeCircle(230, 150, 100);
canvas.strokeCircle(180, 250, 100);
canvas.strokeCircle(280, 250, 100);
};
今回勉強するのは20行目です。
その47で説明を省いたプロパティです。
「合成タイプを設定しよう」と題されていますが別の言い方で表現するならば
「 重なった部分の処理方法 」ということになります。
処理方法（以下、合成タイプ）は timlib.js に11種類あります。
HTML5ではこれに独自の合成タイプを指定出来るものも用意されていますが、かなり高度なことをしない限りは11種類で事足りかと思います。
一気に説明してもいいかなと思ったのですがサンプルが別れていますので個別に説明します。
20行目
canvas.globalCompositeOperation = "source-atop";
合成タイプとして「 source-atop 」が指定されています。
これは20行目の合成タイプを指定する前に描画されたものと重なった部分だけを表示するという合成タイプです。
23～26行目
それぞれの円のスタイル（色）と円を描画しています。
20行目で指定した合成タイプで表示されているのが確認できます。
赤い円は16～17行目ですので今回は赤い円が基準となり、緑と青のそれぞれの円は重なってる部分だけしか表示されていません。
補助線があるので確認しやすいと思います。
以降のサンプルを説明する時にちょっと必要なので「 重なり順 」のことも軽く触れておきます。
円や矩形が重なる場合、特に指定がない時はは後に描画されたものが上になります。
ですので今回は赤い円が最初に描画されていますので下、緑が二番目なので真ん中、青が三番目なので上となります。
上から順番に「 青 」 → 「 緑 」 → 「赤 」ですね。
このプロパティに限らず重なり順は結構重要なので気を止めておいてくださいね。
29～33行目
補助線を描画しています。
どこが表示されているか表示されていないかハッキリわかりますね。
