Canvas入門 - 円描画編

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

###①HTML,JSを用意
基本的には、[Canvas入門 - 線・矩形描画編](https://qiita.com/yarimo/items/03661007b0e7e8b9e8e6)で使用したものと同様のものを使用します。

```html
<!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()で線を描画します。

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

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

以下のようなドキュメントに詳細が載っていますので、あわせてご確認ください。
[> arc() メソッド](http://www.html5.jp/canvas/ref/method/arc.html)

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


####例1)円の描画
JSの中身を抜粋します。

```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(); // 軌跡の範囲を塗りつぶす
```

<img width="155" alt="円結果" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401626/3476514b-be74-21c9-d788-30025494d1e9.png">


####例2)扇型の描画

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

```js
    ctx.arc(100, 50, 30, 0, Math.PI / 6); // (100, 50)の位置に半径30pxの円、終了角度は「π = Math.PI（180度の半円)」
```
↓のようなよくわからない図が出力されます。

<img width="202" alt="扇型失敗例" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401626/eacfc350-a7e8-d71a-fb5e-dd79f8c0fad1.png">


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


```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.moveTo(100, 50); // 円の中心に筆をおろす
    ctx.arc(100, 50, 30, 0, Math.PI / 6); // (100, 50)の位置に半径30pxの円
    ctx.closePath(); // パスを閉じる
    ctx.fill(); // 軌跡の範囲を塗りつぶす
```

すると↓のように扇型が出力されました。
<img width="134" alt="扇型結果" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401626/e39d5268-e69d-b672-50db-19195509923f.png">

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

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

```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.moveTo(100, 50); // 円の中心に筆をおろす
    ctx.arc(100, 50, 30, 0, Math.PI / 6, true); // (100, 50)の位置に半径30pxの円
    ctx.closePath(); // パスを閉じる
    ctx.fill(); // 軌跡の範囲を塗りつぶす
```

<img width="138" alt="扇型、反時計回り結果" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401626/cd383b38-9940-d71c-fd2e-661bc486c3bc.png">