【HTML5】入門 HTML5をまとめてみる3【Canvas】

HTML/CSS

こんにちは、しきゆらです

HTML5関連の記事の第3回になります（今までのHTML5関連の記事はこちら→HTML5関連）

前回に引き続き、Canvasについてみて行きます

入門 HTML5

 

 

前回はCanvasはどういうものなのか、どのように描きこむのかについて触れました

今回は、実際に描きこんでいこうと思います

 

前回の最後のほうに上げたこの画像

これもCanvasを使って描きました（デモページ）

本のなかではこれを実際に作りながら、どのように描きこみを行うのかが書かれています

 

描くための準備

まずは、上の画像を部品に分けてみます

  • 縦、横の罫線
  • 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に線が引かれるのです

 

 

しかし、これを書きこみ実行しても何も表示されないと思います

下書きはあくまで下書き、本番ではないのです

本書きするためのメソッドを使って、表示させましょう

context.strokeStyle = "#999";
context.stroke();

strokeStyleについては前回出てきましたね

図形の線のスタイルを指定するメソッドです

ここでは色を指定していますね

指定方法はこの他にも、rgbやrgbaでも可能です

 

stroke()が本書きメソッドです

下書きで引いた線をCanvasに描きこみ表示します

 

さて、次に軸を作る

軸は、罫線と異なる色で表示したい

この場合は、新たにパスを作成し描く

/*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座標の順に渡します

 

次は、端にある点と座標を作ります

丸い点も作れますが、面倒なので四角形を使って行きます

まずは右上のから作っていきましょう

 

ここではテキストのベースラインを意識して作ってみましょう

座標を表す文字列の上端をy=5に合わせることにします

テキストサイズから高さを求めて・・・とするのは大変なのでベースラインをいじります

/*右上*/
context.textBaseline = "top";
context.fillText("(0, 0)", 8, 5);
context.fillRect(0, 0, 3, 3);

面倒な計算を行わなくても、ベースラインをいじるだけで揃えることができるんですね

本当にy=5にそろっているのか確認したい場合は、moveToやlineToを使って実際に線を描いてみるとわかります

 

同様に左下のものも作ろう

この場合は、文字の長さによって画面からはみ出ないように気を付けなければいけない

このような場合は、textAlignを右に、ベースラインを下にして、テキストの右下の座標を指定してやると簡単です

/*左下*/
context.textBaseline = "bottom";
context.textAlign = "right";
context.fillText("(300, 300)", 290, 290);
context.fillRect(297, 297, 3, 3);

これで、座標が完成しました！！

今回はここまで

入門 HTML5

 

・・・え？先に示した画像より出来がいい？

 

Posted by しきゆら