CanvasRenderingContext2D.fillRect()
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.fillRect() はキャンバス 2D API のメソッドで、塗りつぶした矩形を現在の fillStyle に基づいて描きます。
このメソッドはキャンバスに直接描画を行い、現在のパスを変更しません。したがって、その後の fill() または stroke() の呼び出しには影響しません。
構文
js
void ctx.fillRect(x, y, width, height);
fillRect() メソッドは塗りつぶした矩形を、 (x, y) を始点とし、 width と height でサイズを指定しで描画します。塗りつぶしのスタイルは、現在の fillStyle 属性によって決定されます。
引数
例
単純な塗りつぶした矩形
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);
仕様書
| Specification |
|---|
| HTML # dom-context-2d-fillrect-dev |