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()
の呼び出しには影響しません。
構文
void ctx.fillRect(x, y, width, height);
fillRect()
メソッドは塗りつぶした矩形を、 (x, y)
を始点とし、 width
と height
でサイズを指定しで描画します。塗りつぶしのスタイルは、現在の fillStyle
属性によって決定されます。
引数
例
単純な塗りつぶした矩形
fillRect
メソッドを利用した簡単な使用例です。
HTML
<canvas id="canvas"></canvas>
JavaScript
矩形の左上は (20, 10) です。幅は 150 で高さは 100 です。
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(20, 10, 150, 100);
結果
キャンバス全体の塗りつぶし
このコードでは、キャンバス全体を矩形で塗りつぶします。これは、背景を作成し、その上に他のものを描画するのに便利です。このため、矩形の寸法は <canvas>
要素の width
と height
属性に等しくなるように設定されています。
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 |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
fillRect |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support