clearRect() メソッド

構文

context . clearRect(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()は除きますが、シャドー効果、グローバル・アルファ、グローバル・コンポジション演算子の対象にもなります。

clearRect(x, y, w, h) メソッドは、指定された矩形と現在のクリッピング領域との重なる領域のイメージを消去して、そのピクセルを透明な黒にクリアしなければいけません。高さと幅のいずれかが 0 なら、このメソッドは何も作用しません。

このサンプルでは、fillRect() メソッドで背景全体を赤色で塗りつぶした後、clearRect() メソッドを使って小さい矩形で切り抜いています。

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

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

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 ○

ExplorerCanvasは、clearRect() メソッドを呼び出すと、Canvas 領域すべてをクリアしてしまいます。