HTML Canvasで矩形を描画する方法

方法1: getContext()メソッドを使用する方法 HTMLの要素にidを指定し、JavaScriptでその要素を取得します。次に、getContext()メソッドを使用してCanvasRenderingContext2Dオブジェクトを取得し、そのオブジェクトのメソッドを使用して矩形を描画します。

<canvas id="myCanvas"></canvas>

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
context.fillRect(50, 50, 200, 100); // (x, y, width, height)

方法2: createRect()メソッドを使用する方法 CanvasRenderingContext2DオブジェクトのcreateRect()メソッドを使用して矩形を作成し、それを描画します。

<canvas id="myCanvas"></canvas>

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
const rect = new Path2D();
rect.rect(50, 50, 200, 100); // (x, y, width, height)
context.fill(rect);

方法3: rect()メソッドとfill()メソッドを使用する方法 CanvasRenderingContext2Dオブジェクトのrect()メソッドで矩形のパスを作成し、fill()メソッドで矩形を描画します。

<canvas id="myCanvas"></canvas>

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
context.rect(50, 50, 200, 100); // (x, y, width, height)
context.fill();

これらはいくつかの矩形描画の方法の一部です。他にもさまざまな方法がありますが、ここでは代表的な方法を紹介しました。選択した方法に応じて、矩形の位置やサイズを調整してください。また、線を描画する方法や矩形の塗りつぶしの色を変更する方法など、さまざまな設定も可能です。詳細な情報については、HTML Canvasのドキュメントやチュートリアルを参照してください。