CanvasRenderingContext2D.rect()
CanvasRenderingContext2D.rect()
はキャンバス 2D API のメソッドで、現在のパスに矩形を追加します。
現在のパスを変更する他のメソッドと同様に、このメソッドも直接何かを描画するわけではありません。 矩形をキャンバスに描画するには、 fill()
(en-US) または stroke()
メソッドを使用することができます。
メモ: 矩形の作成とレンダリングを一度に行うには、 fillRect()
または strokeRect()
メソッドを使用してください。
構文
js
void ctx.rect(x, y, width, height);
rect()
メソッドは、 (x, y)
を始点とし、 width
と height
で大きさを指定した矩形のパスを作成します。
引数
x
-
矩形の開始位置の X 座標です。
y
-
矩形の開始位置の Y 座標です。
width
-
矩形の幅です。正の値の場合は右側に、負の値の場合は左側になります。
height
-
矩形の高さです。正の値の場合は下側に、負の値の場合は上側になります。
例
矩形を描画
この例は、矩形のパスを rect()
メソッドを使用して生成します。このパスは fill()
メソッドをし擁して描画されます。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
矩形の角は (10, 20) の位置です。幅は 150 で高さは 100 です。
js
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