キャンバスで CSS3 境界線の半径を再現しようとしています。
角丸四角形を描くのは簡単ですが、CSS では各境界線の値が高くなる可能性があります。
例:
HTML
<div class="normal_radius"></div>
<div class="high_radius"></div>
<div class="high2_radius"></div>
CSS
div { height:50px;width:50px;position:absolute;top:10px; }
.normal_radius {
border: 1px solid black;
border-radius: 5px 5px 10px 15px;
left: 10px;
}
.high_radius {
border: 1px solid red;
border-radius: 5000px 500px 100px 150px;
left: 80px;
}
.high2_radius {
border: 1px solid blue;
border-radius: 2500px 250px 50px 75px;
left: 160px;
}
ここでjsfiddle
黒の通常の境界半径値、再現できます。赤、境界半径の高い値、それを再現する方法がわかりません。そして青、高い値を 2 で割ったもの、赤と同じ結果です。
私の質問は簡単です。キャンバスで赤と青を再現するにはどうすればよいですか?
よろしくお願いします。