サイト内検索

fillRect() メソッド

構文

context . fillRect(x, y, w, h)

canvas 上の指定の矩形を、現在の塗りつぶしスタイルを使って、塗りつぶします。

仕様

矩形をビットマップに即座に描画するメソッドが 3 つあります。それぞれ 4 つの引数をとります。最初の 2 つには、矩形の左上端の x 座標と y 座標を与えます。次の 2 つには、矩形の幅 w と 高さ h を与えます。

現在の変形マトリックスは、次の 4 つの座標に適用されなければけません。これらの座標は、指定された矩形を取得するために閉じられるパスを形成します: (x, y), (x+w, y), (x+w, y+h), (x, y+h)

現在のパスに影響を与えることなく、形状が描画されます。そして、この形状は、クリッピング領域の対象となります。clearRect()は除きますが、シャドー効果、グローバル・アルファ、グローバル・コンポジション演算子の対象にもなります。

fillRect(x, y, w, h) メソッドは、fillStyle を使って、指定の矩形領域を塗りつぶします。高さか幅のいずれかが 0 なら、このメソッドは何も作用しません。


原文:http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-fillrect

サンプル

fillRectメソッドのサンプル

このサンプルでは、fillStyle プロパティで赤色を定義したうえで、fillRect() メソッドを使って塗りつぶされた矩形を描いています。

ctx.fillStyle = "rgb(200, 0, 0)";
ctx.fillRect(20, 30, 60, 40);

[fillRect() メソッドの実際のサンプル]

fillRect() メソッド で描かれる矩形はパスではありません。そのため、beginPath() メソッドや fill() メソッドを呼び出す必要はありません。

ブラウザ対応状況

Firefox Safari Chrome Opera IE ExplorerCanvas
2 ○ 2 ○ 1 ○ 9.2 ○ 9 ○ 0002 ○
3 ○ 3 ○ 2 ○ 9.5 ○   3 ○
3.5 ○ 4 ○ 3 ○ 10 ○    
3.6 ○ 5 ○ 6 ○ 10.60 ○