JS5 :HTML5向けjavascriptフレームワークのチュートリアルサイト

角丸四角形の描画

角丸の矩形を描く方法です。矩形を描く関数は2つあり、ひとつは均一な丸み半径を与えるdrawRoundRect関数、もうひとつはdrawRoundRectComplexです。以下がそのコーディングになります。引数が多い事以外は特筆するところはありません。

//すべての頂点の丸み半径を10に指定
//drawRoundRect(x座標,y座標,幅,高さ,丸み半径);
g.drawRoundRect(-100,0,100,100,10);

//頂点の丸み半径を個別に指定
//drawRoundRect(x座標,y座標,幅,高さ,lt,rt,rb,lb);
//(ltはleft-top、rbはright-bottom)
g.drawRoundRectComplex(0,-100,100,100,50,-10,50,0);

実行結果

それぞれの関数を使って角丸矩形を描画してみました。drawRoundRectComplexで描画した矩形はもはや矩形ではないですね。マイナス値を設定してみていますが、一応動くようです。ただし、lt、rtにはマイナスを設定した場合は動作しますが、lb、rbにマイナスを指定した場合、何も描画されません。バグでしょうか。以下が実際の実行結果になります。