JavaScriptのCanvasで楕円を描く方法

Canvas要素を作成する前提で説明します。HTMLに次のようなCanvas要素を作成します。

<canvas id="myCanvas" width="500" height="300"></canvas>

JavaScriptコードを使用して楕円を描画する手順は以下の通りです。

1. Canvas要素を取得します。

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');

2. 楕円を描画する関数を作成します。以下のコードは、中心座標(x, y)と楕円の半径(rx, ry)を受け取り、楕円を描画する関数です。

function drawEllipse(x, y, rx, ry) {
  context.beginPath();
  context.ellipse(x, y, rx, ry, 0, 0, 2 * Math.PI);
  context.stroke();
}

3. 楕円を描画する座標と半径を指定して関数を呼び出します。

drawEllipse(250, 150, 100, 50);

上記のコード例では、Canvas要素の中央に楕円が描画されます。中心座標は(250, 150)であり、x軸方向の半径(rx)は100、y軸方向の半径(ry)は50です。

さらに、以下のように楕円を塗りつぶすこともできます。

function drawFilledEllipse(x, y, rx, ry) {
  context.beginPath();
  context.ellipse(x, y, rx, ry, 0, 0, 2 * Math.PI);
  context.fill();
}
drawFilledEllipse(250, 150, 100, 50);

楕円を塗りつぶすには、context.fill()を使用します。

以上がJavaScriptのCanvasで楕円を描く方法です。これにより、楕円の描画が可能になります。必要に応じて、中心座標や半径を変更して、さまざまな楕円を描画できます。