JavaScriptでキャンバスに円弧を描画しよう【初心者向け】

前回

キャンバスに円弧を描画しよう

前回はcanvasに矩形(四角形)を描くプログラムを作りました。
今回はcanvasに円や半円を描くプログラムを作ってみましょう。
円を描画するやり方は、三角形を描画するやり方に似ています。
canvasに円を描く手順は、以下のようになります。

円を描く手順

beginPath()メソッドを使って、パスを作成する
arc()メソッドを使って、円の中心座標、半径、円周の開始角度、終了角度を指定する
closePath()メソッドを使って、開始した座標と最後の座標を接続する
fill()メソッドかstroke()メソッドを使って、円を表示する

円弧メソッドの使い方

円弧の描画は、arc()メソッドを使います。

オブジェクト.arc(X座標, Y座標, 半径, 開始角度, 終了角度, 方向)

X座標とY座標は円弧の中心座標です。
開始角度と終了角度はX軸を基準に計算して、単位はラジアンを使います。
1ラジアンは180/π(3.14...)で約57°なので、開始角度を0にした場合、終了角度にπを指定すると半円に、2πを指定すると円になります。
JavaScriptでπを表現するには、Math.PIを使います。
方向は、trueを指定すると反時計回りに、falseを指定すると時計回りに円弧を描きます。デフォルトはfalseです

キャンバスに円を描くプログラム

キャンバスに円または半円を描くプログラムは、以下のようになります。
このプログラムでは、circle()という関数を作って円の描画処理をまとめています。
7番目の引数は"fill"にすると円を塗りつぶし、"stroke"にすると円を線で表示します。
また、8番目の引数で円の色を、9番目の引数で円周の太さを指定できるようにしています。
なお、円を塗りつぶす場合は、9番目の引数は不要です。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Circle</title>
</head>
<body onload="strDraw();">
  <canvas id="pos" width="400" height="400"></canvas>
  <script type="text/javascript">

    // 円表示関数
    function circle(fig,x,y,r,start,end,mode,color,thick) {
      fig.beginPath();                    // 新しいパスを作成
      fig.arc(x,y,r,start,end);           // 円を描画
      fig.closePath();                    // パスの終了

      // 塗りつぶし
      if (mode == "fill") {
        fig.fillStyle = color;            // 塗りつぶす色
        fig.fill();

      // 輪郭描画
      } else if (mode == "stroke") {
        fig.strokeStyle = color;          // 線の色
        fig.lineWidth = thick;            // 線の太さ
        fig.stroke();
      }
    }

    // 開始関数
    function strDraw() {
      // ドキュメントオブジェクト作成
      var id1 = document.getElementById('pos');

      // 2Dオブジェクト作成
      var fig = id1.getContext('2d');

      // 円描画
      circle(fig,100,100,80,0,      Math.PI,  "fill",  "black");
      circle(fig,300,100,80,0,      Math.PI*2,"fill",  "red");
      circle(fig,100,300,80,Math.PI,Math.PI*2,"stroke","green", 5);
      circle(fig,300,300,80,0,      Math.PI*2,"stroke","blue", 10);
    }
  </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Circle</title>

</head>

// 円表示関数

function circle(fig,x,y,r,start,end,mode,color,thick) {

fig.beginPath(); // 新しいパスを作成

fig.arc(x,y,r,start,end); // 円を描画

fig.closePath(); // パスの終了

// 塗りつぶし

if (mode == "fill") {

fig.fillStyle = color; // 塗りつぶす色

fig.fill();

// 輪郭描画

} else if (mode == "stroke") {

fig.strokeStyle = color; // 線の色

fig.lineWidth = thick; // 線の太さ

fig.stroke();

}

// 開始関数

function strDraw() {

// ドキュメントオブジェクト作成

var id1 = document.getElementById('pos');

// 2Dオブジェクト作成

var fig = id1.getContext('2d');

// 円描画

circle(fig,100,100,80,0, Math.PI, "fill", "black");

circle(fig,300,100,80,0, Math.PI*2,"fill", "red");

circle(fig,100,300,80,Math.PI,Math.PI*2,"stroke","green", 5);

circle(fig,300,300,80,0, Math.PI*2,"stroke","blue", 10);

}

</script>

</body>

</html>

プログラムを実行すると、WEBブラウザ上に二つの円と二つ半円が表示されます。

canvasに図形を描く詳しいやり方は、以下の「MDN Web Docs」を参照してください。

MDN Web Docs ～ canvasに図形を描く

次回

JavaScriptで三角関数を使って線分を表示しよう【初心者向け】