CanvasRenderingContext2D: rect() メソッド
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
CanvasRenderingContext2D.rect() はキャンバス 2D API のメソッドで、現在のパスに矩形を追加します。
現在のパスを変更する他のメソッドと同様に、このメソッドも直接何かを描画するわけではありません。 矩形をキャンバスに描画するには、fill() または stroke() メソッドを使用することができます。
メモ:
矩形の作成とレンダリングを一度に行うには、 fillRect() または strokeRect() メソッドを使用してください。
構文
js
rect(x, y, width, height)
rect() メソッドは、 (x, y) を始点とし、 width と height で大きさを指定した矩形のパスを作成します。
引数
返値
なし (undefined)。
例
矩形を描画
この例は、矩形のパスを 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.beginPath(); // 新しいパスを開始
ctx.rect(10, 20, 150, 100); // 矩形を現在のパスに追加
ctx.fill(); // パスを描画
結果
仕様書
| 仕様書 |
|---|
| HTML # dom-context-2d-rect-dev |