HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML CanvasのclearRect()メソッドの使い方を徹底解説

HTML CanvasのclearRect()メソッドは、指定した矩形領域内のピクセルを消去するために使用されるメソッドです。<canvas>要素を使用すると、JavaScriptを通じてWebページ上に自由にグラフィックを描画できます。すべてのcanvas要素には、描画領域のサイズを決定するwidth（幅）とheight（高さ）という2つの属性が用意されています。

clearRect()メソッドの基本構文

clearRect()メソッドの構文は以下の通りです。

ctx.clearRect(p, q, width, height);

各パラメータの意味は次のようになっています。

  • p：消去する矩形の左上隅のx座標
  • q：消去する矩形の左上隅のy座標
  • width：消去する矩形の幅
  • height：消去する矩形の高さ

このメソッドは、アニメーションのフレーム更新時などに前の描画内容を消す際にもよく使われる、Canvas操作の基本的なメソッドの一つです。

clearRect()メソッドの実装例

それでは、実際にclearRect()メソッドを使ったサンプルコードを見てみましょう。まずcanvas全体をグレーで塗りつぶし、その後一部の領域を消去します。

<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="500" height="350" style="border:2px solid blue;">
</canvas>
<script>
var c = document.getElementById("newCanvas");
var ctx = c.getContext("2d");
// キャンバス全体をグレーで塗りつぶし
ctx.fillStyle = "gray";
ctx.fillRect(0, 0, 500, 350);
// 指定した矩形領域を消去
ctx.clearRect(250, 100, 50, 100);
</script>
</body>
</html>

実行結果

HTML CanvasのclearRect()メソッドの使い方を徹底解説

このコードを実行すると、グレーで塗りつぶされたキャンバスの中に、座標(250, 100)を起点として幅50px・高さ100pxの矩形領域だけが透明に消去されていることが確認できます。このようにclearRect()メソッドを使えば、Canvas上の任意の範囲を簡単にクリアできます。

  1. HTML DOMのcreateEvent()メソッドとは？使い方を徹底解説

    HTML DOMのcreateEvent()メソッドは、イベントオブジェクトを生成するためのメソッドです。生成するイベントの種類は引数で指定します。なお、createEvent()で作成したイベントは、使用する前に必ず初期化する必要があります。また、作成したイベントをHTML要素へ通知（ディスパッチ）するには、対象のノードに対してdispatchEvent()メソッドを呼び出します。 構文 HTML DOM createEvent()メソッドの基本構文は以下のとおりです。 document.createEvent( eventType ) eventTypeは文字列型の必須パラメータで、生成

  2. HTML DOM getNamedItem()メソッドとは？使い方をサンプルコード付きで解説

    HTML DOMのgetNamedItem()メソッドは、NamedNodeMapオブジェクトの中から、指定した名前に一致する属性ノードを取得するために使用されます。このメソッドを呼び出す際は、必ずattributesプロパティに対して実行する必要があります。attributesプロパティはすべての属性のコレクション（NamedNodeMap）を返すため、その中からgetNamedItem()メソッドを使って特定の属性だけを取り出すことができるのです。 構文 getNamedItem()メソッドの構文は以下の通りです。 namednodemap.getNamedItem(nodename) こ