その28。
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.fillRoundRect(100, 100, 300, 200, 20);
});
今回勉強するのは16行目です。「 fillRoundRect() 」で塗りつぶしの角丸四角形を描画をしています。
角丸とはサンプルを見てもらった通り角を丸めたものを言います。 「 R 」と表現されることもあり、設計図等でよく使います。
その9で勉強した矩形描画の応用といった感じでしょうか。
基準点（その9でいうA地点）を決め、そこから終点（その９でいうB地点）までを相対距離で四角形の大きさを決めます。 そして角丸の大きさを指定します。
「 0 」と指定すると角丸をしていない普通の矩形になります。 指定しないと描画してくれませんので「 fillRoundRect() 」で普通の矩形を描画したい時は「 0 」としてください。
パラメータは順番に「基準点のX座標、基準点のY座標、基準点からのX軸方向への距離、基準点からのY軸方向への距離、角丸の大きさ」となります。
「 角丸の大きさ 」とは何なのかということですが、実は指定しているのは実は円の半径なんです。
矩形にの四隅それぞれに対して、指定した半径の円を重ねて交差していない部分を削除しています。（あくまで理解しやすくするための表現です。内部処理はちょっと違いますが） ですので、指定する値を大きくすると丸味の強い矩形が出来上がるというわけですね。 図表してみました。
