CanvasRenderingContext2D.rect()
CanvasRenderingContext2D.rect() はキャンバス 2D API のメソッドで、現在のパスに矩形を追加します。
現在のパスを変更する他のメソッドと同様に、このメソッドも直接何かを描画するわけではありません。 矩形をキャンバスに描画するには、 fill() (en-US) または stroke() メソッドを使用することができます。
Note: 矩形の作成とレンダリングを一度に行うには、 fillRect() または strokeRect() メソッドを使用してください。
構文
void ctx.rect(x, y, width, height);
rect() メソッドは、 (x, y) を始点とし、 width と height で大きさを指定した矩形のパスを作成します。
引数
x-
矩形の開始位置の X 座標です。
y-
矩形の開始位置の Y 座標です。
width-
矩形の幅です。正の値の場合は右側に、負の値の場合は左側になります。
height-
矩形の高さです。正の値の場合は下側に、負の値の場合は上側になります。
例
矩形を描画
この例は、矩形のパスを rect() メソッドを使用して生成します。このパスは fill() メソッドをし擁して描画されます。
HTML
<canvas id="canvas"></canvas>
JavaScript
矩形の角は (10, 20) の位置です。幅は 150 で高さは 100 です。
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.rect(10, 20, 150, 100);
ctx.fill();
結果
仕様書
| Specification |
|---|
| HTML Standard # dom-context-2d-rect-dev |
ブラウザーの互換性
BCD tables only load in the browser