前回 クリックするたびに文字を出現させる の続きです。前回は単純に文字を追加していっただけですが、今回はクリックした場所に文字を表示させる処理を解説します。

クリックされた場所に文字を描画する

今回はcanvas要素を使います。これはHTML5から新たに追加された要素です。これを使えばJavaScriptによって2Dや3Dの図形を描画することができるようになるのです。

canvas要素で図形を表示できる幅と高さは、初期値で幅300px、高さ150pxです。ただしwidthとheight属性を指定すれば描画範囲を変更することができます。ただしCSSでcanvas要素のwidthとheightを指定してしまうとcanvas要素が拡大されるだけで描画範囲を変更することはできないので注意が必要です。

CSSでは描画範囲を変更ができないので境界線を描画するだけにとどめています。

style.css

問題のapp.jsですが、document.getElementById関数でcanvasを取得して、サイズを調整します。そのあとgetContext(‘2d’)を実行してコンテキストを取得します。fillText関数を呼び出せば文字の描画はできるのですが、問題はどこに描画するかです。

イベントリスナーの引数からクリックされた座標を知る

イベントリスナーの引数を使えばクリックされた座標をはじめとしてさまざまな情報を取得できます。ここでは最初にページ上におけるcanvasの座標を取得しています。ページ上でクリックされた座標はev.pageX、ev.pageYからわかります。両者を使えばcanvas上におけるクリックされた座標がわかります。

また文字を描画するときにクリックされた座標が中心になるようにしたいので、ctx.textAlign = ‘center’; ctx.textBaseline = ‘middle’;を指定しています。

app.js

文字を矩形で囲む

あとで簡単なゲームをつくりたいので描画された文字を囲む矩形を描画します。そのためには文字の幅と高さを知る必要があります。文字の幅と高さがわかれば矩形の縦横の長さと矩形の左上の座標もわかります。

文字の縦横の長さを調べるにはmeasureText関数を使います。

これで文字の縦横の長さがわかります。文字の中心の座標はすでにわかっているので、ここから文字を囲む矩形の左上の座標を求めることができます。