【HTML5】入門 HTML5をまとめてみる3【Canvas】
こんにちは、しきゆらです。
HTML5関連の記事の第3回になります（今までのHTML5関連の記事はこちら→HTML5関連）
前回に引き続き、Canvasについてみて行きます。
前回はCanvasはどういうものなのか、どのように描きこむのかについて触れました。
https://shikiyura.com/2015/08/html5_primer_2/今回は、実際に描きこんでいこうと思います。
描くための準備
上記の画像を要素に分解してみます。
- 縦、横の罫線
- X、Y軸
- 各軸の先にある矢印
- 軸のラベルである「X」と「Y」の文字
- 左上と右下の点
- 座標を表記している「(0, 0)」、「(300, 300)」の文字
こんな簡単な図にもこれだけの部品が使われているんですね。
では、この部品を作っていきましょう。
描いてみよう
まずは、Canvasを定義します
<canvas id="graph" width="300" height="300"></canvas>見ての通り、300×300のCanvasを定義しました。
残りはJavaScriptのお仕事です。
適当な関数を定義し、処理を書きこみます。
function draw(){
/* Canvasを探しだし、書き込み可能にする */
var canvas = document.getElementById("graph");
var context = canvas.getContext("2d");
}この関数の中に追加していきます。
※
JavaScriptの関数を、HTMLが読み込まれた段階で実行したければ
bodyタグのところに
<body onload="関数名">とすれば読み込んでくれます。
寄り道
Canvasにはパスと呼ばれるものがあります
簡単に言えば線でつなげられる形のことですね
Canvasでパスを定義することは、鉛筆で下書きをすることと似ています
Canvasに下書きをするメソッドは以下のものがあります
- moveTo(X, Y) : 指定された点まで鉛筆を移動させる
- lineTo(X, Y) : 指定された点まで線を描く
では、この二つを使って部品を作っていきましょう
罫線を引く
上記の２つのメソッドを用いて罫線を引いきます。
先ほど定義した関数の中に、以下のものを追記します。
for(var x = 0.5; x < 300; x += 10){
context.moveTo(x, 0);
context.lineTo(x, 300);
}
for(var y = 0.5; y < 300; y += 10){
context.moveTo(0, y);
context.lineTo(300, y);
}※
なぜ0.5から開始しているのか
画面はピクセルという点の集まりで表現されています。
では、このピクセルを正方形と考えてみましょう。
太さ1の線を表示したい場合、線を整数（0,1,2・・・）の部分に指定すると
指定されたところを中心に1pxの太さを表示しようとします。
つまり、1の部分から左右に0.5pxの太さで1pxを表示しようとします。
ですが、画面は0.5pxというものを表現できないので、結果的に2pxの線を表示してしまいます。
次に、0.5の部分から1pxの太さの線を引く場合はどうでしょうか。
0.5の部分から左右に0.5pxで線を引こうとします。
結果的に、0～1の間1pxに線が引かれるのです。
しかし、これを書きこみ実行しても何も表示されません。
これまでのコードは、Canvasに線を引く位置や長さを指定していただけにすぎません。
実際に線を描画するためのメソッドを使って、表示させましょう。
context.strokeStyle = "#999"; // 線の色を指定
context.stroke(); // 実際に指定した線を描画strokeStyleについては前回出てきましたね。
図形の線のスタイルを指定するメソッドです。
ここでは色を指定しています。
指定方法はこの他にも、rgbやrgbaでも可能です。
stroke()が本書きメソッドです。
下書きで引いた線をCanvasに描きこみ表示します。
X軸・Y軸を書く
さて、次に軸を作っていきます。
軸は、罫線と同色だと見ずらいので異なる色で描画します。
この場合は、新たにパスを作成し描いていきます。
/*X軸*/
context.beginPath();
context.moveTo(0, 40);
context.lineTo(180, 40);
context.moveTo(200, 40);
context.lineTo(300, 40);
context.moveTo(290, 35);
context.lineTo(300, 40);
context.lineTo(290, 45);
/*Y軸*/
context.moveTo(40, 0);
context.lineTo(40, 180);
context.moveTo(40, 200);
context.lineTo(40, 300);
context.moveTo(35, 290);
context.lineTo(40, 300);
context.lineTo(45, 290);
/*軸を描画*/
context.strokeStyle = "#000";
context.stroke();なぜ線の間を開けているのでしょうか。
そうです、軸のラベルを表示するための場所です。
軸は黒線で表示したいので、strokeStyleには黒色をあらわす「#000」を指定しています。
テキストを描きこむ
Canvasにはテキストを描きこむことができますが、文字にはCSSのテクニック（marginなど）は指定することができません。
しかし、フォントへの設定は行うことができます。
例えば、フォントのサイズ、太さ、フォントファミリー、text-alignなどを指定できます。
その中で面倒なのがテキストのベースラインです。
ベースラインとは、簡単に言えば文字を揃えるためのラインですね。
文字の中心で揃えるのか、下で揃えるのかなど言語によって異なるものがあります。
例えば、ヒンディー語は一本の線にぶら下がるような形になっています。
आधारभूत
ベースラインの種類は、top、 hanging、middle、ideographic、bottomがあります。
様々な文字に対応するために、ベースラインというものがあるんですね。
アルファベットのみを扱うような場合は、上、中、下あたりを指定していればまず問題はないと思います。
普段はあまり気にしないと思いますが、知識としてメモしておきましょう。
では、実際にテキストを描いてみます。
context.font = "bold 14px sans-serif";
context.fillText("X", 185, 45);
context.fillText("Y", 35, 195);fontで文字サイズなどを指定しています。
文字を描きこむにはfillTextメソッドを使います。
引数として、表示したい文字列、X座標、Y座標の順に渡します。
原点・(300, 300)の点と座標を描く
次は、端にある点と座標を作ります。
丸い点も作れますが、面倒なので四角形を使って行きます。
まずは右上のから作っていきましょう。
ここではテキストのベースラインを意識して作ってみましょう。
座標を表す文字列の上端をy=5に合わせることにします。
テキストサイズから高さを求めて・・・とするのは大変なのでベースラインをいじります。
/*原点*/
context.textBaseline = "top";
context.fillText("(0, 0)", 8, 5);
context.fillRect(0, 0, 3, 3);面倒な計算を行わなくても、ベースラインをいじるだけで揃えることができるんですね。
本当にy=5にそろっているのか確認したい場合は、moveToやlineToを使って実際に線を描いてみるとわかります。
同様に(300, 300)の座標を描きます。
この場合は、文字の長さによって画面からはみ出ないように気を付けなければいけません。
このような場合は、textAlignを右に、ベースラインを下にして、テキストの右下の座標を指定してやると簡単です。
/*左下*/
context.textBaseline = "bottom";
context.textAlign = "right";
context.fillText("(300, 300)", 290, 290);
context.fillRect(297, 297, 3, 3);これで、座標が完成しました！！
今回はここまで
おわり