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

HTML5 Canvasで楕円を描く方法とは？scale()とellipse()を使った実装例を解説

HTML5のCanvasで楕円（オーバル）を描きたいときは、いくつかの方法があります。この記事では、代表的な2つの手法を、そのまま動かせるサンプルコード付きでわかりやすく解説します。

方法1：scale()で円を変形させて楕円を描く

正円を描くためのarc()メソッドと、座標系を拡大・縮小するscale()メソッドを組み合わせると、円を横長や縦長に変形させて楕円として描画できます。基本的な手順は次のとおりです。

  1. save()で現在の描画状態を保存する
  2. translate()でキャンバスの中央へ原点を移動する
  3. scale(2, 1)でX方向だけ2倍に拡大する（円が横長の楕円になる）
  4. arc()で円のパスを作成する
  5. restore()で状態を元に戻し、塗りつぶしと輪郭線を描画する

サンプルコード

<!DOCTYPE HTML>
<html>
  <head>
  </head>
  <body>
    <canvas id="newCanvas" width="450" height="300"></canvas>
    <script>
      // キャンバスの取得

      var c = document.getElementById('newCanvas');
      var context = c.getContext('2d');
      var cX = 0;
      var cY = 0;
      var radius = 40;

      context.save();
      context.translate(c.width / 2, c.height / 2);
      context.scale(2, 1);
      context.beginPath();
      context.arc(cX, cY, radius, 0, 2 * Math.PI, false);
      context.restore();
      context.fillStyle = '#000000';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = 'yellow';
      context.stroke();
    </script>
  </body>
</html>

出力結果

HTML5 Canvasで楕円を描く方法とは？scale()とellipse()を使った実装例を解説

方法2：ellipse()メソッドを使う（推奨）

近年のブラウザでは、楕円専用のellipse()メソッドが利用できます。scale()による座標変換が不要なため、よりシンプルで直感的に記述できます。引数は「中心X・中心Y・半径X・半径Y・回転角・開始角・終了角」の順に指定します。

<!DOCTYPE HTML>
<html>
  <head>
  </head>
  <body>
    <canvas id="myCanvas" width="450" height="300"></canvas>
    <script>
      var c = document.getElementById('myCanvas');
      var ctx = c.getContext('2d');

      ctx.beginPath();
      // ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle)
      ctx.ellipse(c.width / 2, c.height / 2, 80, 40, 0, 0, 2 * Math.PI);
      ctx.fillStyle = '#000000';
      ctx.fill();
      ctx.lineWidth = 2;
      ctx.strokeStyle = 'yellow';
      ctx.stroke();
    </script>
  </body>
</html>

まとめ

古いブラウザへの互換性が必要な場合はscale()とarc()を組み合わせる方法が有効ですが、現行のブラウザだけであればellipse()メソッドを使うのが最も簡単で可読性も高い選択肢です。プロジェクトの要件に応じて使い分けましょう。

  1. HTML5のCanvasにSVGファイルを描画する方法

    Canvas（キャンバス）にSVGを描画するには、SVGを画像として扱う必要があります。まず、HTMLコンテンツを含めるための<foreignObject>要素を使ってSVGデータを構築し、その後、生成したSVG画像をCanvas上に描画します。 具体的な流れは以下の通りです。 処理の手順 SVG文字列を作成する：<svg>要素の中に<foreignObject>要素を配置し、その中にXHTML名前空間（xmlns=https://www.w3.org/1999/xhtml）を指定したHTMLを記述します。 Blobオブジェクトに変換する：作成したSVG文

  2. HTML5 Canvasを使って星を描く方法を解説

    HTMLのcanvas要素に描画を行うには、JavaScriptを使用します。実際に描き始める前に、HTML DOMメソッドであるgetElementById()とgetContext()を使って、キャンバスへの参照と描画コンテキストを取得しておく必要があります。HTMLで星を描くには、canvas要素を利用します。星形を描く際にはlineTo()メソッドが便利です。このメソッドはx座標とy座標の2つのパラメータを受け取り、その位置へ線を引くことで図形を形成していきます。まず、HTMLドキュメント内にキャンバスを配置する方法から見ていきましょう。サンプルコード以下のコードを実行すると、HTML