描画手順
①HTMLにcanvas要素を定義
公開予定もないお試し用なので中身は簡素ですが、以下の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を追記していきます。
<body>
<canvas id="canvas"></canvas>
<script>
</script>
</body>
※以下、追加したscriptタグの内のみの記載していきます。
const canvas = document.getElementById('canvas');
上記により、canvasの参照を取得します。
③取得した参照をもとにコンテキストを取得
コンテキストとは、線の色や太さ、影の色などのどのような描画を行うかの設定内容です。
まずは先ほど参照を取得したcanvas要素からコンテキストを取得します。
const canvas = document.getElementById('canvas'); // canvas要素への参照の取得
const ctx = canvas.getContext('2d'); // コンテキストの取得
２行目が追加した箇所です。getContext('2d')でコンテキストを取得しています。
引数の2dは二次元を指しています。
後ほどこのコンテキストを用いて、どういう線を引くかなどの情報を設定します。
④色や線の太さなどの情報を設定
先ほどのコンテキストにどういう線を引くかの情報を設定します。
現状は、以下のプロパティを把握できていれば問題ありません。
| プロパティ | 内容 |
|---|---|
| strokeStyle | 線や輪郭の色 |
| fillStyle | 塗りつぶしの色 |
| lineWidth | 線の幅 |
| lineCap | 線の先端部分の形状 |
| shadowColor | 影の色 |
| shadowBlur | 影のぼかし範囲 |
試しに設定してみます。
例)横幅3pxの赤い線を引くためのプロパティ設定
ctx.strokeStyle = '#f00'; // 線の色
ctx.lineWidth = 3; // 線の幅
ctx.lineCap = 'butt'; // 線の先端の形状
線の先端の形状ですが、種類は（butt, round, square)が存在します。
それぞれの表示については、以下のサポートがわかりやすいでしょうか。
あわせてご確認ください。
> lineCap プロパティ 補足情報はコチラ
⑤線や矩形の描画
先ほどどのような線を引くかのプロパティ設定を行いましたが、それだけでは実際に線を描画できません。
プロパティの表示確認は、このあとの描画を行った上で色々試すと良いと思います。
まず描画に使用するメソッドを紹介します。
| メソッド | 内容 |
|---|---|
| beginPath() | パスの初期化 |
| moveTo(x, y) | 筆をおろす座標 |
| lineTo(x, y) | 指定座標まで筆を動かす |
| closePath() | 筆を最初におろした位置まで筆を動かす |
| stroke() | 筆の軌跡を線で描画 |
| fill() | 筆の軌跡の範囲内を塗りつぶす |
| ※筆という表現が個人的にしっくりきたため、その表現を用いています。ただし、ここは個人差があるかと思いますので、しっくりこない場合は、以下のドキュメントもあわせてご確認いただけますと幸いです。 | |
| > Canvasリファレンス |
試しに描画してみます。
例1)横線
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();
これで横棒が描画されたかと思います。
以下のようなものですね。
※lineToメソッドの時点では何も描画されないことに注意してください。最終的なstrokeメソッドで初めて描画されます。
例2)塗りつぶしなし、線だけの三角形
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(); // これまでの筆の軌跡を線として描画
これで枠線だけの三角形が描画されたかと思います。
以下のようなものですね。
また、fillメソッドを使用した場合は、以下のようになります。
ctx.fill(); // これまでの筆の軌跡の範囲を塗りつぶし
最後
こういう投稿系はあまり経験がなく、はたしてこれで良いのかと不安な部分はありますが、気になる部分は改めて修正しつつ、とりあえず発信回数を増やしていきたいと思っています。
不束者ですが、今後ともよろしくお願いいたします。
以上、長々失礼しました。
追記
19.04.24
編集リクエストいただきまして、コード部分にシンタックスハイライトを適用しました。
ご指摘ありがとうございました！