その56。
tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編
今回試すサンプルは「透明度・合成」の「合成タイプを設定しよう(lighter)」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
円の重なった部分が混色されて元の色と違う色が描画されたと思います。
/*
* 定数
*/
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 = "lighter";
// 円を描画
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行目になります。
合成タイプを指示しているプロパティです。
その48で詳しく説明していますので確認してみてください。
20行目
canvas.globalCompositeOperation = "lighter";
合成タイプとして「lighter 」が指定されています。
図形の重なった部分が加法混色で描画される合成タイプとなります。
23～26行目
それぞれの円のスタイル（色）と円を描画しています。
20行目で指定した合成タイプで表示されているのが確認できます。
重なった部分を加法混色で描画されると書きましたがこの「加法混色」とはなんだろうと言うことですが、簡単に言うならば「色を混ぜると明るくなる混色方法」ということです。
色を混ぜれば混ぜるだけ明るく白に近づきます。
ですので3つの円が重なっている部分は白で描画されていますよね。
加法混色の代表的なものは光です。
中学生の頃、「光の三原色」って習いませんでしたか？あれです。
余談ですが、対になる混色方法として「減法混色」というものがあります。
「色を混ぜると暗くなる混色方法」です。
混ぜると黒に近づきます。
代表的なのは「絵の具」ですね。
美術の時間にパレットが汚くなった覚えはないですか？
重なり順はわかりづらいですが後から描画されたものが上となります。
通常通りということですね。
29～33行目
補助線を描画しています。
どこが表示されているか表示されていないかハッキリわかりますね。
