CanvasRenderingContext2D: clearRect() メソッド
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.clearRect()
はキャンバス 2D API のメソッドで、矩形領域のピクセルを、透明な黒に設定することで消去します。
メモ: clearRect()
は、正しいパスの使用を行わないと、意図しない副作用が発生することがあることに注意してください。 clearRect()
を呼び出した後、必ず新しいアイテムを描画し始める前に beginPath()
を呼び出してください。
構文
clearRect(x, y, width, height)
clearRect()
メソッドは、矩形領域のピクセルを透明な黒 (rgb(0 0 0 / 0%)
) に設定します。矩形の左上の角は (x, y)
にあり、大きさは width
と height
で指定されます。
引数
返値
なし (undefined
)。
例
キャンバス全体の消去
このコードでは、キャンバス全体を消去します。これは一般的に、アニメーションの各フレームの開始時に必要とされます。消去される領域の寸法は <canvas>
要素の width
と height
属性に等しくなるように設定します。
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
キャンバスの一部を消去
この例では、黄色っぽい背景の上に青い三角形を描きます。そして clearRect()
メソッドでキャンバスの一部を消去しています。
HTML
<canvas id="canvas"></canvas>
JavaScript
消去する領域はの形状は矩形で、左上の角が (10, 10) になっています。幅は 120、高さは 100 です。
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// 黄色い背景を描画
ctx.beginPath();
ctx.fillStyle = "#ff6";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 青い三角形を描画
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.moveTo(20, 20);
ctx.lineTo(180, 20);
ctx.lineTo(130, 130);
ctx.closePath();
ctx.fill();
// キャンバスの一部を消去
ctx.clearRect(10, 10, 120, 100);
結果
仕様書
Specification |
---|
HTML Standard # dom-context-2d-clearrect-dev |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- このメソッドを定義しているインターフェイス:
CanvasRenderingContext2D
CanvasRenderingContext2D.fillRect()
CanvasRenderingContext2D.strokeRect()