その35。

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

今回試すサンプルは「色, グラデーション(Color, Gradient)」の「状態をスタック, 復帰させてみよう」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
赤青赤の四角形が描画されたと思います。

/*
* 定数
*/
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.strokeStyle = "red";
canvas.strokeRect(50, 50, 50, 50);

// 状態を保存
canvas.save();
// 四角形を描画
canvas.strokeStyle = "blue";
canvas.strokeRect(75, 75, 50, 50);
// 保存した状態を復帰
canvas.restore();

// 四角形を描画(strokeStyle が赤に戻る)
canvas.strokeRect(100, 100, 50, 50);
};

今回勉強するのは16～25行目です。 基本的には以下を繰り返すだけなので簡単だと思います。

スタイルを決める → 描画する → 保存する → 呼び出す

16～17行目

その31で勉強したストロークスタイルの指定とその10で勉強したストロークでの矩形描画を行なっています。

20行目

「 save()」で直前のスタイルを保存します。 サンプルの場合は以下のコードです。

canvas.strokeStyle = "red";

ストロークのスタイルと塗りつぶしのスタイルは個別に保存されますので両方同時に設定して1回で保存することも出来ます。  

22～23行目

保存したストロークスタイルとは別のスタイルを設定し矩形を描画しています。

canvas.strokeStyle = "blue";
canvas.strokeRect(75, 75, 50, 50);

25行目

「 restore() 」で保存したスタイルを呼び出しています。 赤のストロークスタイルですね。

canvas.restore();

27行目

ストロークスタイルは呼び出されていますので、ストロークの矩形を描画すれば適用されます。
その34と組み合わせて塗りつぶしのスタイルを保存したサンプルを作ってみました。
後から描画されたものが上に重なるのが基本仕様です。
重なり順を指定すれば変えることも出来ますよ。

Tweet