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

HTMLキャンバスのfillRect()メソッドとは？塗りつぶし矩形の描き方を解説

HTMLキャンバスのfillRect()メソッドとは

HTMLキャンバスのfillRect()メソッドは、Webページ上に塗りつぶされた矩形（長方形）を描画するためのメソッドです。特に色を指定しない場合、デフォルトの塗りつぶし色は黒になります。

<canvas>要素を使用すると、JavaScriptを使ってWebページ上に自由にグラフィックを描くことができます。キャンバスのサイズは、height（高さ）とwidth（幅）という2つの属性によって決まります。

fillRect()メソッドの構文

context.fillRect(p, q, width, height);

各パラメータの意味は以下の通りです。

  • p: 矩形の左上隅のx座標
  • q: 矩形の左上隅のy座標
  • width: 矩形の幅（ピクセル）
  • height: 矩形の高さ（ピクセル）

塗りつぶしの色を変更したい場合は、fillRect()を呼び出す前にfillStyleプロパティで任意の色を設定します。

fillRect()メソッドの実装例

それでは、実際にfillRect()メソッドを使ったサンプルコードを見てみましょう。

コード例

<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="500" height="350" style="border:2px solid orange;">
</canvas>
<script>
   var c = document.getElementById("newCanvas");
   var ctx = c.getContext("2d");
   ctx.fillStyle = "blue";
   ctx.fillRect(0, 0, 500, 350);
   ctx.clearRect(250, 100, 50, 100);
</script>
</body>
</html>

コードの解説

  • まず、getElementById()でキャンバス要素を取得し、getContext("2d")で2D描画コンテキストを取得します。
  • fillStyle = "blue" により、塗りつぶし色を青に設定しています。
  • fillRect(0, 0, 500, 350) で、キャンバス全体（500×350ピクセル）を青色で塗りつぶします。
  • clearRect(250, 100, 50, 100) で、指定した位置（x=250、y=100）に50×100ピクセルの矩形領域を消去し、そこが透明になります。

出力結果

このコードを実行すると、オレンジ色の枠線に囲まれたキャンバス全体が青色で塗りつぶされ、その中央部分に透明な矩形が切り抜かれたように表示されます。
HTMLキャンバスのfillRect()メソッドとは？塗りつぶし矩形の描き方を解説

まとめ

fillRect()メソッドを使えば、座標とサイズを指定するだけで簡単に塗りつぶし矩形を描画できます。fillStyleと組み合わせれば色の変更も自由自在です。さらにclearRect()と併用することで、図形の一部を消すといった表現も可能になるので、ぜひいろいろなパターンを試してみてください。

  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) こ