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

HTML5のarc()メソッドで円を描く方法をわかりやすく解説

HTML5では、<canvas>要素とarc()メソッドを組み合わせることで、簡単に円を描くことができます。完全な円を描きたい場合は、開始角度を「0」、終了角度を「2 * Math.PI」に指定するのがポイントです。

arc()メソッドのパラメータ一覧

arc()メソッドには、以下の6つのパラメータを渡します。

No.パラメータ説明
1x円の中心のx座標
2y円の中心のy座標
3r円の半径
4startingAngle描画開始の角度（ラジアン単位）
5endingAngle描画終了の角度（ラジアン単位）
6counterclockwise（true / false）反時計回りに描画する場合は「true」、時計回りの場合は「false」を指定

角度は度数法ではなくラジアンで指定することに注意してください。1周（360度）は「2π（2 * Math.PI）」に相当します。

arc()で円を描くサンプルコード

以下のコードを実行すると、HTML5のcanvas上にarc()メソッドで円が描画されます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Canvas</title>
   </head>
   <body>
      <canvas id="newCanvas" width="300" height="150" style="border:1px solid #000000;"></canvas>
      <script>
         var c = document.getElementById("newCanvas");
         var ctxt = c.getContext("2d");
         ctxt.beginPath();
         ctxt.arc(100, 75, 50, 0, 2 * Math.PI);
         ctxt.stroke();
      </script>
   </body>
</html>

コードのポイント解説

  • getContext("2d")：canvasの描画コンテキストを取得します。2D描画には必須です。
  • beginPath()：新しいパスを開始します。これにより、それまでのパスと混ざらずに図形を描けます。
  • arc(100, 75, 50, 0, 2 * Math.PI)：中心を(100, 75)とし、半径50ピクセルの完全な円を定義します。
  • stroke()：定義したパスに沿って実際に線を描画します。塗りつぶしたい場合はfill()を使用します。

このように、arc()メソッドの開始角度と終了角度を調整すれば、半円や扇形など、さまざまな形状も自由に描くことができます。

  1. HTML5のCanvasでfillText()メソッドを使ってテキストを描画する方法

    HTML5のCanvas上に塗りつぶしテキスト（塗り文字）を描画するには、fillText()メソッドを使用します。このメソッドは、指定した座標（x、y）の位置にテキストを描画するもので、デフォルトの文字色は黒です。fillText()メソッドの構文fillText(text, x, y [, maxWidth ])fillText()メソッドで使用できるパラメータは以下のとおりです。No.パラメータ説明1text描画するテキスト2xテキスト描画開始位置のx座標3yテキスト描画開始位置のy座標4maxWidth省略可能。テキストの最大幅（ピクセル単位）。指定すると、テキストはこの幅に収まるよう

  2. HTML5のlineTo()メソッドで線を描画する方法

    HTML5のlineTo()メソッドで線を描画する方法HTMLで線を描画するには、canvas要素を使用します。canvas上に線を引く際に活躍するのがlineTo()メソッドです。このメソッドはx座標とy座標の2つのパラメータを受け取り、指定した位置までの直線を定義します。lineTo()メソッドは単独では機能せず、以下のメソッドと組み合わせて使用するのが基本の流れです。beginPath(): 新しいパスの作成を開始するmoveTo(): 線の始点となる座標を指定するlineTo(): 線の終点となる座標を指定するstroke(): 定義したパスを実際に画面へ描画するサンプルコード以下のコ