CanvasRenderingContext2D: fillRect() メソッド
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
CanvasRenderingContext2D.fillRect() はキャンバス 2D API のメソッドで、塗りつぶした矩形を現在の fillStyle に基づいて描きます。
このメソッドはキャンバスに直接描画を行い、現在のパスを変更しません。したがって、その後の fill() または stroke() の呼び出しには影響しません。
構文
js
fillRect(x, y, width, height)
fillRect() メソッドは塗りつぶした矩形を、 (x, y) を始点とし、 width と height でサイズを指定しで描画します。塗りつぶしのスタイルは、現在の fillStyle 属性によって決定されます。
引数
返値
なし (undefined)。
例
単純な塗りつぶした矩形
fillRect メソッドを利用した簡単な使用例です。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
矩形の左上は (20, 10) です。幅は 150 で高さは 100 です。
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(20, 10, 150, 100);
結果
キャンバス全体の塗りつぶし
このコードでは、キャンバス全体を矩形で塗りつぶします。これは、背景を作成し、その上に他のものを描画するのに便利です。このため、矩形の寸法は <canvas> 要素の width と height 属性に等しくなるように設定されています。
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, canvas.width, canvas.height);
仕様書
| 仕様書 |
|---|
| HTML # dom-context-2d-fillrect-dev |