Canvas入門 - 線・矩形描画編

##描画手順

###①HTMLにcanvas要素を定義
公開予定もないお試し用なので中身は簡素ですが、以下のHTMLを用意しました。

```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>
</body>
</html>
```

canvas要素を定義し、idとしてcanvasを付与しました。


###② canvas要素への参照を取得
ここからはJSの話です。
`</body>`の直前に書き進めようと思います。

まず以下のようにscriptタグを追加しました。
この中にJSを追記していきます。

```html

<body>
  <canvas id="canvas"></canvas>

  <script>
  </script>
</body>
```

※以下、追加したscriptタグの内のみの記載していきます。

```js

  const canvas = document.getElementById('canvas');
```

上記により、canvasの参照を取得します。

###③取得した参照をもとにコンテキストを取得
コンテキストとは、線の色や太さ、影の色などのどのような描画を行うかの設定内容です。

まずは先ほど参照を取得したcanvas要素からコンテキストを取得します。

```js

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

２行目が追加した箇所です。getContext('2d')でコンテキストを取得しています。
引数の2dは二次元を指しています。
後ほどこのコンテキストを用いて、どういう線を引くかなどの情報を設定します。

###④色や線の太さなどの情報を設定
先ほどのコンテキストにどういう線を引くかの情報を設定します。
現状は、以下のプロパティを把握できていれば問題ありません。

| プロパティ       | 内容 |
|:-----------------|:------------------|
| strokeStyle             |  線や輪郭の色            |
| fillStyle             |  塗りつぶしの色          |
| lineWidth             |  線の幅            |
| lineCap             |  線の先端部分の形状            |
| shadowColor             |  影の色            |
| shadowBlur             |  影のぼかし範囲           |

試しに設定してみます。
####例)横幅3pxの赤い線を引くためのプロパティ設定

```js

  ctx.strokeStyle = '#f00'; // 線の色
  ctx.lineWidth = 3; // 線の幅
  ctx.lineCap = 'butt'; // 線の先端の形状
```

線の先端の形状ですが、種類は（butt, round, square)が存在します。
それぞれの表示については、以下のサポートがわかりやすいでしょうか。
あわせてご確認ください。
[> lineCap プロパティ 補足情報はコチラ](http://www.html5.jp/canvas/ref/property/lineCap.html)


###⑤線や矩形の描画
先ほどどのような線を引くかのプロパティ設定を行いましたが、それだけでは実際に線を描画できません。
プロパティの表示確認は、このあとの描画を行った上で色々試すと良いと思います。

まず描画に使用するメソッドを紹介します。

| メソッド       | 内容 |
|:-----------------|:------------------|
|beginPath()             |  パスの初期化            |
|moveTo(x, y)             |  筆をおろす座標         |
|lineTo(x, y)             |  指定座標まで筆を動かす          |
| closePath()             | 筆を最初におろした位置まで筆を動かす        |
|stroke()             |  筆の軌跡を線で描画            |
| fill()             |  筆の軌跡の範囲内を塗りつぶす          |
※筆という表現が個人的にしっくりきたため、その表現を用いています。ただし、ここは個人差があるかと思いますので、しっくりこない場合は、以下のドキュメントもあわせてご確認いただけますと幸いです。
[> Canvasリファレンス](http://www.htmq.com/canvas/)

試しに描画してみます。
####例1)横線
```js

  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
 
  /* コンテキストの設定 */
  ctx.strokeStyle = '#333'; // 線の色は暗め
  
  /* 描画 */
  ctx.beginPath(); // パスを初期化
  ctx.moveTo(50, 50); // x軸に50px, y軸に50px移動した箇所を開始位置として筆をおろす
  ctx.lineTo(100, 50); // x軸に100px, y軸に50px移動した箇所に筆を動かす
  ctx.stroke();
```

これで横棒が描画されたかと思います。
以下のようなものですね。
<img width="178" alt="横棒の結果" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401626/c3548769-a3ff-78ec-d09d-7b730101e0e4.png">

※lineToメソッドの時点では何も描画されないことに注意してください。最終的なstrokeメソッドで初めて描画されます。


####例2)塗りつぶしなし、線だけの三角形

```js

  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  
  /* コンテキストの設定 */
  ctx.strokeStyle = '#333'; // 線の色は暗め
  
  /* 描画 */
  ctx.beginPath(); // パスを初期化
  ctx.moveTo(50, 50); // x軸に50px, y軸に50px移動した箇所を開始位置として筆をおろす
  ctx.lineTo(100, 50); // x軸に100px, y軸に50px移動した箇所に筆を動かす
  ctx.lineTo(100, 100); // x軸に100px, y軸に100px移動した箇所に筆を動かす
  ctx.closePath(); // 最終地点(100, 100)から開始地点まで筆を動かす
  ctx.stroke(); // これまでの筆の軌跡を線として描画
```

これで枠線だけの三角形が描画されたかと思います。
以下のようなものですね。
<img width="145" alt="塗りつぶしなし、線だけの三角形の結果" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401626/cfbf04eb-671c-c474-5054-1d1b72b01a6f.png">


また、fillメソッドを使用した場合は、以下のようになります。

```js
  ctx.fill(); // これまでの筆の軌跡の範囲を塗りつぶし
```
<img width="151" alt="fillメソッドの結果" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401626/47a7ddd6-3528-9885-3db2-f1bc85e962e2.png">


##最後
こういう投稿系はあまり経験がなく、はたしてこれで良いのかと不安な部分はありますが、気になる部分は改めて修正しつつ、とりあえず発信回数を増やしていきたいと思っています。
不束者ですが、今後ともよろしくお願いいたします。

以上、長々失礼しました。

##追記
19.04.24
編集リクエストいただきまして、コード部分にシンタックスハイライトを適用しました。
ご指摘ありがとうございました！