CanvasRenderingContext2D.rect()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
CanvasRenderingContext2D.rect()
はキャンバス 2D API のメソッドで、現在のパスに矩形を追加します。
現在のパスを変更する他のメソッドと同様に、このメソッドも直接何かを描画するわけではありません。 矩形をキャンバスに描画するには、 fill()
または stroke()
メソッドを使用することができます。
メモ:
矩形の作成とレンダリングを一度に行うには、 fillRect()
または strokeRect()
メソッドを使用してください。
構文
void ctx.rect(x, y, width, height);
rect()
メソッドは、 (x, 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 # dom-context-2d-rect-dev |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
rect |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support