四角形で指定した矩形を削除する(clearRect) [html5 の Canvas を使ってみる：第卅二回]

clearRect(); では指定した四角形の矩形を削除することができる。四角形という画一的な形だけになにに使うかがよく判らないけど、やってみる。

★html 側

<canvas id="clearRect"></canvas>

★Javascript 側

onload = function() {
// 画面ロード時に描画を実行
  draw();
};
function draw() {
// id: clearRect で 2 次元描画を行うことの定義
  var c = document.getElementById("clearRect").getContext('2d');

// arc(); で青い円を描画
  c.beginPath();
  c.arc(60, 60, 50, 0, 2 * Math.PI, false);
  c.fillStyle = "rgba(0, 0, 255, .7)";
  c.fill();
  c.stroke();

// x:45、y:55 の座標 から幅 30px、
// 高さ 10px の矩形で削除
  c.clearRect(45, 55, 30, 10);
}

すると、こうなる。


確認環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53

W3C；
4.8.11 The canvas element — HTML 5