その18。
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.fillCircle(200, 200, 150);
// 指定した矩形範囲をクリア
canvas.clear(150, 150, 100, 100);
});
17行目でその11で勉強した円形を描画する処理が書かれています。 今回の勉強するところは20行目です。
「変数canvas」に対して「.clear() 」というメソッドで指定範囲を非表示にするという描画をしています。
.clear(基準点のX座標, 基準点のY座標, 基準点からのX軸方向への距離, 基準点からのY軸方向への距離)という順番で値を指定します。
基準点から対角線上にある点は自動補完されるので特に指定しなくも大丈夫です。
図表してみましたので参考にしてみてください。
