HTML5では図形などをcanvasを使って描画することができます。使ったことがなかったので何か書けるようになりたいと思います。
canvasで描画してみよう
canvasで描画の前に
描画の前に軽くcanvasの仕組みの話です。
canvasで描画と書いていますが、canvasそのものには描画する機能はありません。Javascriptと併用することで図形を描画することができます。
少しだけ詳しく書くとcanvasでは描画する範囲を決めJavascriprで制御するためのID(ノード)を設置します。そして「getContext(“2d”)」 という描画開始のおまじない（2Dレンダリングコンテキスト）を使用して線、四角形、円などを描画します。
※ getContext(“2d”) と引数に2dを指定しているのだから3dとかもあるのかなと思いましたが、webglがあるようです。
※ コンテキスト/コンテクスト（context）は事情、背景、状況などの意味を持つ英単語です。ITでは関連データという意味としても使われているようです。描画する上でのcanvasの状態といったところでしょうか。
描画の準備
テキストエディタで以下のコードを記述し拡張子をhtmlにしてブラウザで開いて準備完了です。
<!DOCTYPE html>
<html><body>
<canvas id=”field” width=”200″ height=”200″ style=”background:#cccccc”>
</canvas>
</body>
</html>
styleを適用することも可能です。
Javascriptの準備
//HTMLのcanvas情報をcanvasへ関連付け
let canvas = document.getElementById(‘field’);
//コンテクストを取得
const ctx = canvas.getContext(‘2d’);
canvasの関連付けを行ってから、これから紹介するコードを実行してください。
参考
実際に使用する際はcanvasを利用できない環境でスクリプトを実行しないように、 if文で囲う方法があるそうです。
let canvas = document.getElementById(‘sample’);
if (canvas.getContext){
let context = canvas.getContext(‘2d’);
//コード
}
参考サイト：http://www.htmq.com/canvas/002.shtml
それでは描画しながら基本的なcanvasでの描画方法を学んでいきましょう。
線を引く
See the Pen prepare-for-canvas by Nakamoto (@programmerlife) on CodePen.
//開始点を決める
ctx.moveTo(0, 100);
//終点を決める
ctx.lineTo(200, 100);
//描画する
ctx.stroke();
moveTo(x, y)、lineTo(x, y)のようにxy座標の位置を入力し線を描きます。
strokeするまでは見えない線が引かれているようなイメージ。
多角形を描く
See the Pen canvas- Polygon by Nakamoto (@programmerlife) on CodePen.
多角形の場合、線で描きます。
試しに三角形を描いてみます。
//線をリセット
ctx.beginPath();
//開始点を決める
ctx.moveTo(50, 50);
//中間点を決める
ctx.lineTo(150, 50);
//最後の点を決める
ctx.lineTo(100, 150);
//線を閉じる
ctx.closePath();
//描画する
ctx.stroke();
beginPath()は新しく線を引くときに使用します。
closePath()で開始点と最後の点を結んでくれます。
四角形を描く
See the Pen canvas-rect by Nakamoto (@programmerlife) on CodePen.
//線をリセット
ctx.beginPath();
//四角形を作成
ctx.rect(75, 75, 50, 50);
//線を塗りつぶす
ctx.fill();
■ rect()の構文
rect(x, y, width/幅, height/高さ)
stroke()では線を描いていましたが、fill()は線の中を塗りつぶしてくれます。
丸を描く
See the Pen canvas-circle by Nakamoto (@programmerlife) on CodePen.
//線をリセット
ctx.beginPath();
//円を作成
ctx.arc(100, 100, 90, 0, 2 * Math.PI);
//描画する
ctx.stroke();
arc()の構文は以下のようになります。
■ 構文
arc(x, y, 半径, 円弧の始まりの角度, 円弧の終わりの角度 [, オプション]);
円弧の始まりと終わりの確度はラジアン角です。円周上でその円の半径と同じ長さの弧を切り取る2本の半径。
（ラジアン＝弧の長さが半径と等しくなる角度を1とする角度の単位のこと。）
オプションは省略可能です。trueで反時計回りに始まりから終わりの角度に向けて円弧を描きます。
デフォルトは時計回りです。
数学の詳しいことは書けませんが0, 1 * Math.PIで半円、0, 2 * Math.PIで円、0, 1.5 * Math.PIで3/4の円、0, 0.5 * Math.PIで1/4の円が描けます(オプションはデフォルト)。そんなに複雑な図形を描画することはないと思うのでこのくらい把握しておけば初心者的には良しとします。
文字を描く
See the Pen canvas-text by Nakamoto (@programmerlife) on CodePen.
//フォントと文字サイズを決める
ctx.font = “30px Arial”;
//線の色を決める（赤）
ctx.strokeStyle = “rgb(255, 0, 0)”;
//文字を描くstrokeText()
ctx.strokeText(“Hello World”, 20, 60);
//塗りつぶしの色を決める（青）
ctx.fillStyle = “rgb(0, 0, 255)”;
//文字を描くfillText()
ctx.fillText(“Hello World”, 20, 150);
fillText()もstrokeText()も線をと描画する得と基本的には同じです。textがつく分文字が簡単に書けます。
■ fillText()の構文
fillText(書きたい文字, x, y [, オプション ] )
オプションは省略可能。maxWidthを書き入れることができます。
strokeText()はアウトラインのみの文字が表示されます。
■ strokeText()の構文
strokeText(書きたい文字, x, y [, オプション ])
オプションは省略可能。maxWidthを書き入れることができます。
fillStyle、strokeStyleでは色を決めています。今回はRGBで値を入力して色を決めています。
グラデーションをかける
See the Pen canvas-gradient by Nakamoto (@programmerlife) on CodePen.
//グラデーションの準備
let grd = ctx.createLinearGradient(10, 0, 180, 0);
grd.addColorStop(0, “red”);
grd.addColorStop(1, “white”);
// 塗りつぶしに設定したグラデを設定t
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 180, 180);
まずは新たにでてきた謎のcreateLinearGradient()をみてみましょう。
■ createLinearGradient() の構文
createLinearGradient(x0, y0, x1, y1)
- x0 グラデーション開始点のx座標
- y0 グラデーション開始点のy座標
- x1 グラデーション終了点のx座標
- y1 グラデーション終了点のy座標
4箇所決めるため、たてにグラデーションをかけたり斜めにグラデーションをかけたりすることができます。
addColorStop(0, “red”)の「0」を設定すると開始位置の色を決められます。
addColorStop(1, “white”)の「1」を設定すると終了位置の色を決められます。
0.0～1.0の範囲で色を設定できます。
色は#2660A1のようにカラーコードで指定することやrgb(0,0,255)のように書くこともできます。
斜めにグラデーションの例
See the Pen canvas-gradient2 by Nakamoto (@programmerlife) on CodePen.
//グラデーションの準備
let grd = ctx.createLinearGradient(10, 10, 380, 380);
grd.addColorStop(0, “red”);
grd.addColorStop(1, “white”);
// 塗りつぶしに設定したグラデを設定
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 380, 380);
おわり
canvasで基本的な図形の作成ができるようになれたかと思います。
他にも紹介していない描画方法もあるので、気になる方は調べてみると楽しいです。
canvas以外にもSVGやwebGLの書き方も今後のために調べたいと思います。
参考サイト：https://www.w3schools.com/html/html5_canvas.asp
