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

HTML Canvasのrect()メソッドとは？矩形を描画する方法を解説

rect()メソッドとは

HTML5の<canvas>要素を使用すると、JavaScriptを使ってWebページ上に自由にグラフィックを描画できます。<canvas>要素には、描画領域のサイズを指定するための「width（幅）」と「height（高さ）」という2つの属性があります。

CanvasRenderingContext2Dのrect()メソッドは、キャンバス上に矩形（長方形）のパスを作成するために使用されるメソッドです。なお、rect()メソッドはあくまでパスを定義するだけなので、実際に画面へ描画するには、fill()やstroke()などのメソッドと組み合わせる必要があります。

構文

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

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

  • p： 矩形の左上隅のX座標
  • q： 矩形の左上隅のY座標
  • width： 矩形の幅（ピクセル）
  • height： 矩形の高さ（ピクセル）

rect()メソッドの実装例

それでは、実際にrect()メソッドを使って矩形を描画する例を見てみましょう。以下のコードでは、オレンジ色の大きな矩形の中に、黄色い小さな矩形を重ねて描画しています。

サンプルコード

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="450" height="350" style="border:2px solid blue;">
お使いのブラウザはHTML5のcanvasタグに対応していません。</canvas>
<script>
   var c = document.getElementById("myCanvas");
   var ctx = c.getContext("2d");
   ctx.beginPath();
   ctx.rect(100, 60, 200, 200);
   ctx.fillStyle = "orange";
   ctx.fill();
   ctx.beginPath();
   ctx.rect(110, 90, 180, 120);
   ctx.fillStyle = "yellow";
   ctx.fill();
</script>
</body>
</html>

実行結果

HTML Canvasのrect()メソッドとは？矩形を描画する方法を解説

このコードを実行すると、青い枠線のキャンバス内に、座標(100, 60)を起点とした200×200のオレンジ色の矩形が描画され、さらにその上に座標(110, 90)を起点とした180×120の黄色い矩形が重ねて表示されます。beginPath()で新しいパスを開始し、rect()で矩形を定義した後、fillStyleで塗りつぶしの色を指定してfill()で描画している点に注目してください。

  1. HTML DOM Canvasオブジェクトとは？プロパティ・メソッドと図形描画の実例を解説

    HTML DOM Canvasオブジェクトは、HTML5で導入された<canvas>要素に関連付けられたオブジェクトです。<canvas>タグは、JavaScriptを使ってグラフィックを描画するためのもので、描画領域（コンテナ）として機能します。Canvas上では、線や円、矩形など、さまざまな図形を自由に描くことができます。 Canvasオブジェクトの主なプロパティ Canvasオブジェクトには、以下のようなプロパティが用意されています。 プロパティ説明 fillStyle図形の塗りつぶしに使用する色・グラデーション・パターンを設定または取得します。 st

  2. HTML Canvasの基本を解説!図形や曲線を描画する方法

    Webページ上にキャンバスを描画するには、HTML5の<canvas>要素を使用します。<canvas>要素を使うと、JavaScriptを通じてグラフィックスを自由に描画できます。線分、長方形、ベジェ曲線など、さまざまな図形を描くことが可能です。canvas要素の基本的な設定すべてのcanvas要素には、キャンバスのサイズを指定するためのheight(高さ)とwidth(幅)という2つの属性があります。さらに、JavaScriptからcanvas要素を操作できるように、id属性を設定する必要があります。以下のコード例をご覧ください。<canvas id = ne