html5-canvas
画面をクリアする

構文

• void clearRect（x、y、width、height）
• ImageData createImageData（width、height）

備考

長方形

clearRectメソッドを使用して、キャンバスの任意の長方形のセクションをクリアすることができます。

// Clear the entire canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);

注： clearRectは変換行列に依存します。

これに対処するには、キャンバスを消去する前に変換行列をリセットすることができます。

ctx.save();                                       // Save the current context state
ctx.setTransform(1, 0, 0, 1, 0, 0);               // Reset the transformation matrix
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
ctx.restore();                                    // Revert context state including 
                                                  // transformation matrix

注意： ctx.saveとctx.restoreは、キャンバスの2Dコンテキストの状態を維持する場合にのみ再作成されます。いくつかの状況では、保存とリストアは遅くなる可能性があり、必要でない場合は一般的に避けるべきです。

生画像データ

putImageDataを使用して、レンダリングされたイメージデータに直接書き込むことができます。新しいイメージデータを作成してキャンバスに割り当てると、画面全体が消去されます。

var imageData = ctx.createImageData(canvas.width, canvas.height);
ctx.putImageData(imageData, 0, 0);

注： putImageDataは、コンテキストに適用された変換の影響を受けません。レンダリングされたピクセル領域に直接データを書き込みます。

複雑な形

globalCompositeOperationプロパティを変更することで、複雑な形状の領域をクリアすることがglobalCompositeOperationます。

// All pixels being drawn will be transparent
ctx.globalCompositeOperation = 'destination-out';

// Clear a triangular section
ctx.globalAlpha = 1;    // ensure alpha is 1
ctx.fillStyle = '#000'; // ensure the current fillStyle does not have any transparency
ctx.beginPath();
ctx.moveTo(10, 0);
ctx.lineTo(0, 10);
ctx.lineTo(20, 10);
ctx.fill();

// Begin drawing normally again
ctx.globalCompositeOperation = 'source-over';

キャンバスをグラデーションでクリアします。

すべてのピクセルを透明にするclearRectを使用するのではなく、背景が必要な場合があります。

グラデーションでクリアするには

// create the background gradient once
var bgGrad = ctx.createLinearGradient(0,0,0,canvas.height);
bgGrad.addColorStop(0,"#0FF");
bgGrad.addColorStop(1,"#08F");

// Every time you need to clear the canvas
ctx.fillStyle = bgGrad;
ctx.fillRect(0,0,canvas.width,canvas.height);

これは、clearRect 0.004ms約0.008ms約半分0.004msが、4秒間でリアルタイムアニメーションに悪影響を及ぼすべきではありません。 （時間は、デバイス、解像度、ブラウザ、ブラウザの設定によってかなり異なります。

複合操作を使用してキャンバスをクリアする

合成操作を使用してキャンバスをクリアします。これは、変換とは独立してキャンバスをクリアしますが、 clearRect()ほど高速ではありません。

ctx.globalCompositeOperation = 'copy';

次に描かれたものはすべて前のコンテンツをクリアします。