HTML5 Canvas キャンバスのクリア

HTML5 Canvas clearRect()の使用方法、2D 上下文機能 clearRect() は、キャンバスの矩形をクリアするために使用されます。クリアされた矩形は透明になります。

オンラインサンプル

2D 上下文機能 clearRect() は、キャンバスの矩形をクリアするために使用されます。クリアされた矩形は透明になります。これはコードの例です：

<canvas id="ex1" width="500" height="150" style="border:　1px solid #cccccc;">　　　　
HTML5　Canvas はサポートされていません　　　　
</canvas>　　　　
<script>　　　　
var canvas = document.getElementById("ex1");　　　　
var context = canvas.getContext("2d");　　　　
context.fillStyle = "#ff0000";　　　　
context.fillRect(10,10,　100,100);　　　　
context.strokeStyle = "#0000ff";　　　　
context.strokeRect(30,20,　120,　110);　　　　
context.clearRect(50,　30,　110,　35);　　　　　　　　　
</script>

注意してください、今どうやって赤色と青色の矩形の中の矩形をクリアしているか。
前述の通り、clearRect()を使用してクリアされた領域は透明になります。もしcanvas要素が別の要素の上に配置されている場合、その要素の内容はクリアされた領域を通して見えます。

clearRect(x, y, width, height)

矩形を描画するように、clearRect(x, y, width, height)に渡されます。4clearRect()の引数は、クリアする矩形の左上角と、クリアする矩形の幅と高さを示します。
これはより明確な例です：

var x =　50;
var y =　30;
var width =　110;
var height =　25;
context.clearRect(x, y, width, height);