先日、Canvasを使ってWeb上に星や直線、円などを描画する方法を紹介しました。
実はCanvasには「fillText」というメソッドを用いることで「文字」を書くこともできるので紹介します。
もくじ
はじめに
今回の記事では「strokeRect」や「lineWidth」などというようなメソッドを使うことがあります。
これらの使い方については前回の記事でも紹介しているので説明は省略しているので、わからない場合はあらかじめ確認しておいてください。
今回紹介するコードを記述することによって、以下のような文字を描画することができるようになります。
ではまず、htmlを作成していきましょう。
htmlを用意しよう
htmlを用意するといっても、必要なコードは1文だけなのでぱぱっと作成してしまいましょう。
以下のコードを参考にしてXX.htmlを作成してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="jquery.js"></script>
<script src="sample.js"></script>
</head>
<body>
<canvas id="canvas" width="300" height="100"></canvas>
</body>
</html>
このような構成にしてみてください。
javascript や stylesheetの読み込みなどは各自指定しないと機能しないので注意してください。
このコードの中で、Canvasを使うために必要なコードは
<canvas id=“canvas” width=“300” height=“100”></canvas>
この1文だけです。
width や height などは自由に指定しましょう。
今回はテキストを表示する実装なので、横長のCanvasを作成しておくと良いと思います。
また、cssで「border: 1px solid black」を当てておくと、canvasの範囲を確認しやすくなります。
これで下準備は完了しましたので、htmlとcssのファイルはもう閉じていただいて大丈夫です。
javascriptを記述しよう
いよいよcanvasに文字を描画していきましょう。
canvasに文字を書くためには「fillText」というコードを使用します。
まずは以下のコードを確認してください。
window.onload = function() {
var can = document.getElementById("canvas");
var ctx = can.getContext("2d");
ctx.lineWidth = 2;
ctx.fillStyle = "#0ff";
ctx.font = "50px cursive";
ctx.fillText("Hello World!!", 15, 65);
}
では解説していきます。
まず、lineWidthで描画した文字の線の太さを指定しています。
続いて、文字の色を指定する「fillStyle」がありますよね。
これらのコードについては先日の記事で紹介しているので、詳しい解説は省略します。
では、canvasに文字を書くコードが出てきます。
ctx.font = "50px cursive";
font = “50px cursive” はcssの「font-size」と「font-family」を指定していると思ってください。
つまり、文字のサイズが50pxで文字のスタイルはcursiveになっているということなので、この値はcssと同じようにカスタマイズできます。
上で表示したfont-familyは「serif」ですが、他にもいくつか紹介しますので参考にしてみてください。
fantasy :
monospace :
Osaka-Mono :
見てわかる通り、フォントが変わるだけでかなり雰囲気が変わりますよね。
とはいっても、テキストを描画するという今回の内容には関係ないので適当に選んでください。
ctx.fillText("Hello World!!", 15, 65);
このコードが実際に描画するテキストの内容と座標を意味しています。
fillText( “文字”, x, y) というように指定することで、文字を表示できるようになります。
では実際に描画してみましょう。
canvasのサイズや位置によっては、全く同じコードだと文字の場所がずれてしまう可能映画あります。
その場合はx,y座標の値を調整してください。
座標が正しければ文字が表示されるのですが、冒頭で紹介した完成画像とは少し違っていますよね。
完成系の画像では文字の外枠に色をつけているため、雰囲気が違って見えていると思います。
文字に外枠をつけてみよう
fillTextで描画した文字に外枠をつけるためには、「fillRect、strokeRect」と同じように「fillは塗りつぶし」「strokeは枠のみ」というようになっています。
ですので、同じように「strokeText」を使うことで、テキストにも外枠をつけることができるようになります。
window.onload = function() {
var can = document.getElementById("canvas");
var ctx = can.getContext("2d");
ctx.lineWidth = 2;
ctx.fillStyle = "#0ff";
ctx.font = "43px cursive";
ctx.fillText("Hello World!!", 15, 65);
ctx.strokeStyle = "#000";
ctx.strokeText("Hello World!!", 15, 65);
}
先ほど作成したコードをこのように書き換えることで、文字に外枠をつけることができました。
ctx.strokeStyle = "#000";
ctx.strokeText("Hello World!!", 15, 65);
strokeStyleで枠の色を指定して、strokeText( )で表示する文字を指定しています。
strokeTextのテキストや座標は、fillTextと同じものにしないと外枠にならないので揃えるようにしてください。
テキストに影をつけよう
fillStyle( ) と fillText( ) をもう1つ記述して、元のテキストから少しずらして描画することで「影」のように見せることができます。
先ほど作成したコードを以下のように書き換えてみました。
window.onload = function() {
var can = document.getElementById("canvas");
var ctx = can.getContext("2d");
ctx.lineWidth = 2;
ctx.font = "43px cursive";
//影
ctx.fillStyle = "#AAA";
ctx.fillText("Hello World!!", 19, 67);
//テキスト
ctx.fillStyle = "#0ff";
ctx.fillText("Hello World!!", 15, 65);
//枠
ctx.lineWidth = 1.5;
ctx.strokeStyle = "#333";
ctx.strokeText("Hello World!!", 15, 65);
}
影が一番後ろに描画されるようにするために始めに記述して、座標を少しずらして描画しています。
このようなコードを書くことで、簡単に文字の影ができました。
同じようにすれば、文字だけではなく図形などにも影をつけることができますので、試してみてください。
ちなみに、今回の方法では同じテキストを作成し、影のように見せているのですがCanvasにはもともと影をつけるコードというものが存在しています。
こちらの記事を参考にして作成してみてください。
まとめ
今回紹介した方法ではCanvasに「文字」を描画でき、その描画した文字をカスタマイズできるようになりました。
文字のカスタマイズは「フォント」や「色」「影」など自由なカスタマイズができますので、ぜひ試してみてください。
ではまた。
