その47。
tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編
今回試すサンプルは「透明度・合成」の「透明度を設定しよう」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
赤・緑・青の半透明の円が描画されたと思います。
/*
* 定数
*/
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.globalAlpha = 0.5;
// 円を描画
canvas.fillStyle = "rgb(255, 0, 0)";
canvas.fillCircle(230, 150, 100);
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);
};
今回も勉強するのは16行目です。
16行目
透明度を制御するプロパティとなります。
enchant.js では「 opacity 」として設定していたものですね。
「 0 」に近いほど透明になっていき、「 1 」になると不透明（透けずに見えている状態）になります。
指定方法としては小数点第一位までの数値で指定します。
サンプルですと「 0.5 」ですので半透明となります。
デフォルトは「 1 」です。
実際に弄って変化を確認してみてください。
18～23行目
それぞれの円のスタイル（色）と円を描画しています。
16行目で指定した透明度が反映された状態として描画されます。
25～30行目
コメントにもある通リ補助線を描画しています。
円を縁取りして透明になってもわかるようにですね。
26行目で見慣れないプロパティが出てきましたが次回以降に解説する部分になりますので今回はスルーします。
