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

その29。

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.strokeRoundRect(100, 100, 300, 200, 20);
});

今回勉強するのは16行目です。「 strokeRoundRect() 」で線のみの角丸四角形を描画をしています。
その28で勉強した塗りつぶしの角丸四角形と同じ要領で問題ありません。
パラメータを順番に「基準点のX座標基準点のY座標基準点からのX軸方向への距離基準点からのY軸方向への距離角丸の大きさ」と指定すれば描画されます。
その28と同じ解説図表貼っておきます。


コメントを残す

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