Canvas roundRect()
CanvasRenderingContext2D.roundRect() はキャンバス 2D API のメソッドで、現在のパスに角丸矩形を追加します。
角の半径は、CSS の border-radius プロパティとほぼ同様の方法で指定します。
現在のパスを変更する他のメソッドと同様に、このメソッドは直接何かをレンダリングするものではありません。 角丸矩形をキャンバスに描画するには、fill() メソッドか stroke() メソッドを使用してください。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 99 | 99 | 112 | 16 | 99 | 16 | |
| CanvasRenderingContext2D.roundRect() はキャンバス 2D API のメソッドで、現在のパスに角丸矩形を追加します。 | 99 | 99 | 112 | 16.4 | 99 | 16.4 |
基本構文
JAVASCRIPT
roundRect(x, y, width, height, radii)実務での使いどころ
-
Canvas roundRect() の活用
CanvasRenderingContext2D.roundRect() はキャンバス 2D API のメソッドで、現在のパスに角丸矩形を追加します。
注意点
- 古いブラウザでは対応していない場合がある。
実装メモ
- 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。