描画手順

今回は、円を描画してみたいと思います。

①HTML,JSを用意

基本的には、Canvas入門 - 線・矩形描画編で使用したものと同様のものを使用します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
</head>
<body>
  <canvas id="canvas"></canvas>

  <script>
    const canvas = document.getElementById('canvas'); // canvas要素への参照の取得
    const ctx = canvas.getContext('2d'); // コンテキストの取得
  </script>
</body>
</html>

②描画用メソッドの追記

円を描画するメソッドは以下です。
あくまで軌跡ですので、このあとfill()で塗りつぶすか、stroke()で線を描画します。

arc(x, y, radius, startAngle, endAngle, anticlockwise);

引数	内容
x	円の中心点のx座標
y	円の中心点のy座標
radius	半径
startAngle	円の開始角度
endAngle	円の終了角度
anticlockwise(true or false)	trueで時計回り、falseで反時計回り

以下のようなドキュメントに詳細が載っていますので、あわせてご確認ください。
> arc() メソッド

※角度について、1周は2π、半円はπです。

例1)円の描画

JSの中身を抜粋します。


    const canvas = document.getElementById('canvas'); // canvas要素への参照の取得
    const ctx = canvas.getContext('2d'); // コンテキストの取得

    /* コンテキスト設定 */
    ctx.strokeStyle = '#333'; // 塗りつぶしは暗めの色
    ctx.fillStyle = '#f00'; // 線は赤色
    ctx.lineWidth = 5; // 線の幅は5px

    /* 円の描画 */
    ctx.beginPath(); // パスの初期化
    ctx.arc(100, 50, 30, 0, 2 * Math.PI); // (100, 50)の位置に半径30pxの円
    ctx.closePath(); // パスを閉じる
    ctx.fill(); // 軌跡の範囲を塗りつぶす

例2)扇型の描画

単純にarcの終了角度を下記のように変更すると

    ctx.arc(100, 50, 30, 0, Math.PI / 6); // (100, 50)の位置に半径30pxの円、終了角度は「π = Math.PI（180度の半円)」

↓のようなよくわからない図が出力されます。

扇型として描画する際は、開始点の描画が必要となるため、以下のように「moveToメソッド」で円の中心を指定します。

    const canvas = document.getElementById('canvas'); // canvas要素への参照の取得
    const ctx = canvas.getContext('2d'); // コンテキストの取得

		/* コンテキスト設定 */
    ctx.strokeStyle = '#333'; // 塗りつぶしは暗めの色
    ctx.fillStyle = '#f00'; // 線は赤色
    ctx.lineWidth = 5; // 線の幅は5px

		/* 円の描画 */
    ctx.beginPath(); // パスの初期化
    ctx.moveTo(100, 50); // 円の中心に筆をおろす
    ctx.arc(100, 50, 30, 0, Math.PI / 6); // (100, 50)の位置に半径30pxの円
    ctx.closePath(); // パスを閉じる
    ctx.fill(); // 軌跡の範囲を塗りつぶす

すると↓のように扇型が出力されました。

例3)扇型、反時計回りの描画

開始角度と終了角度は同じですが、反時計回りのため、図の形が「例2」の反転した状態になります。


    const canvas = document.getElementById('canvas'); // canvas要素への参照の取得
    const ctx = canvas.getContext('2d'); // コンテキストの取得

		/* コンテキスト設定 */
    ctx.strokeStyle = '#333'; // 塗りつぶしは暗めの色
    ctx.fillStyle = '#f00'; // 線は赤色
    ctx.lineWidth = 5; // 線の幅は5px

		/* 円の描画 */
    ctx.beginPath(); // パスの初期化
    ctx.moveTo(100, 50); // 円の中心に筆をおろす
    ctx.arc(100, 50, 30, 0, Math.PI / 6, true); // (100, 50)の位置に半径30pxの円
    ctx.closePath(); // パスを閉じる
    ctx.fill(); // 軌跡の範囲を塗りつぶす