その19。

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

今回試すサンプルは「図形-初級(Figure)」の「クリッピングしてみよう」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
左上の頂点が丸味のある四角形が描画されたと思います。

/*
* 定数
*/
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.rect(60, 60, 200, 200);
canvas.clip();

// 四角形を描画
canvas.fillCircle(200, 200, 150);
});

Illustrator等のソフトにある機能の「クリッピングマスク」というものに似ています。
その18で勉強した「 clear() 」の逆の機能とでもイメージするといいかもしれません。
「 clear() 」は指定範囲を見えないように隠しますが、今回は指定範囲だけが見えるようにします。

順番に説明しますと、17行目の「　canvas.rect(60, 60, 200, 200) 」では「 rect() 」で四角形のパスを作成します。
数値はその9で四角形を描画したと思いますが、同じ要領です。A、B地点のXとYの座標指定です。
18行目の「 clip() 」で17行目で作成したパス範囲だけを見えるようにしています。

21行目はその11で勉強した円の描画ですね。円の中心座標と半径を指定しています。
20行目のコメントは誤植なのか見える範囲が四角形だからなのかわかりませんが、コード自体には問題ないのでスルーということで。

Tweet