CanvasRenderingContext2D
.clearRect()
は、座標 (x, y) を始点とする大きさ (width, height) の領域を、透明色(透明な黒)で塗りつぶします。領域内に描画されていたすべてのコンテンツは消去されます。
文法
void ctx.clearRect(x, y, width, height);
引数
x
- 矩形領域の始点のX座標を指定します。
y
- 矩形領域の始点のY座標を指定します。
width
- 矩形領域の幅を指定します。
height
- 矩形領域の高さを指定します。
Usage notes
clearRect
にちなんでよく起きる問題は 不適切なパスによって起きています。clearRect
を呼んで新しいフレームを描画し始める前に beginPath()
を呼ぶのを忘れないようにして下さい。
訳注:
clearRect() 自体の動作にパスの設定は関係ありません。「clearRect()の後はbeginPath()を呼ばなければならない」というルールはありません。この注釈は「キャンバスをクリアした後って大体新しいフレームを描画しようとするよね。そのときに beginPath() し忘れておかしなことになっているのを clearRect() のせいにしないようにね」ということを言いたいのだと思います。
使用例
clearRect
の使い方
clearRect
メソッドを使用する単純な例です。
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(20, 20); ctx.lineTo(200, 20); ctx.lineTo(120, 120); ctx.closePath(); // パスが閉じるので、三角形の最後の辺も描画される。 ctx.stroke(); ctx.clearRect(10, 10, 100, 100); // キャンバス全体を消去するには、以下のようにします。 // ctx.clearRect(0, 0, canvas.width, canvas.height);
以下のコードを編集して、変更がどのように適用されるか試してみてください。
仕様
Specification | Status | Comment |
---|---|---|
HTML Living Standard CanvasRenderingContext2D.clearRect の定義 |
現行の標準 |
ブラウザ間の互換性
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
デスクトップ | モバイル | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
clearRect | Chrome 完全対応 あり | Edge 完全対応 12 | Firefox 完全対応 1.5 | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
凡例
- 完全対応
- 完全対応