JavaScript入門[HTML5編]テキストを描画する

文字を描く命令文

文字を描く場合の命令文を３つ見ておきましょう。

context.font

フォントを指定します。CSSで指定するのと同じ形式になります。

context.fillText(テキスト, X座標, Y座標, 最大幅)

テキストを塗り潰して描画します。

最大幅は省略可能です。指定するとその幅に縮小されて描画されます。

context.strokeText(テキスト, X座標, Y座標, 最大幅)

テキストの輪郭を描画します。

最大幅は省略可能です。指定するとその幅に縮小されて描画されます。

文字を描いてみる

では実際に文字を描くスクリプトを見てみることにしましょう。

<canvas id="cv" width="360" height="240"></canvas>

<script>
var ctx = document.getElementById("cv").getContext("2d");

var txt ="JavaScript"; //描画する文字

ctx.font = "italic 40px Arial"; //フォントにArial,40px,斜体を指定
ctx.fillStyle = "green"; //塗り潰し色を緑に

ctx.fillText(txt,10,50);      //テキストを塗り潰しで描画
ctx.fillText(txt,10,100,100); //テキストの最大幅を100pxに指定

ctx.strokeStyle = "blue"; //輪郭線の色を青に

ctx.strokeText(txt,10,150);     //テキスト輪郭を描画
ctx.strokeText(txt,10,200,100); //テキストの最大幅を100pxに指定
</script>

＜描画結果＞canvasタグにはCSSで二重線の枠を付けています

多くの最新のブラウザでは、文字の最大幅を指定すると横幅を縮めて表示されていると思います。 しかしWindows版Safariの最終版（Ver5.1.7）では最大幅の指定は未対応です。 古いバージョンのブラウザでも実装はまちまちです。