「tmlib.js 怒濤の 100 サンプル!!」を試す その57

その57。

tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編

今回試すサンプルは「透明度・合成」の「合成タイプを設定しよう(copy)」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
青の円のみが描画されたと思います。

/*
* 定数
*/
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 = "copy";

// 円を描画
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 = "copy";

合成タイプとして「copy 」が指定されています。
先の図形を非表示にし、後の図形を表示するようにする合成タイプとなります。

23~26行目

それぞれの円のスタイル(色)と円を描画しています。
20行目で指定した合成タイプで表示されているのが確認できます。

言葉ではちょっと難しく感じますがやってることは簡単です。
まず赤と緑を合成します。
赤の方が先に描画されていますので、赤が非表示になり緑が表示されます。
次に緑と青を合成します。
緑が先ですので緑が非表示になり、青が表示されることになります。
ですのでサンプルでは青の円のみが表示されています。

重なり順は青の円以外が非表示なのでわかりづらいですが後から描画されたものが上となります。
通常通りの重ね順ですね。

29~33行目

補助線を描画しています。
どこが表示されているか表示されていないかハッキリわかりますね。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です