そもそもJavaScriptで表示できるものって何? 文字や画像にポップアップなどを表示する方法が知りたい さまざまなメソッドを活用してWebコンテンツを表示したい JavaScriptでWeb開発をするにあたり、画面に文字や画像を表示できるように勉強することを避けては通れませんよね? HTML5 canvas APIには、テキストを塗りで描画するfillText()や線で描画するstrokeText()といったメソッドが用意されており、テキストをパスオブジェクトと同様に扱うことができます。, fillText()は、テキストを塗りで描画します。第1引数で表示するテキストを指定し、第2, 3引数で表示する座標(x, y)を指定します。仕様上は、オプションの第4引数でテキストの最大幅を指定できるようになっていますが、現時点では各ブラウザでの解釈がバラバラなので指定しない方が良いでしょう。下記の例では、canvasの中央に灰色のテキストでHello World!と表示しています。, strokeText()は、テキストのアウトラインを線で描画します。引数はfillText()と同様に第1引数で表示するテキスト、第2, 3引数で表示する座標(x, y)、オプションの第4引数でテキストの最大幅となります。下記の例では、canvasの中央にHello World!の文字列をアウトラインで表示しています。, いくつかのプロパティを通してテキストのスタイルを指定することができます。fontプロパティでは、使用するフォントに関するスタイルをCSSと同様の形式で指定します。textAlignプロパティでは、テキストの行揃えを"start", "end", "left", "right", "center"の中から指定します。, textBaselineプロパティでは、テキストのベースラインの位置を"top", "hanging", "middle", "alphabetic", "ideographic", "bottom"の中から指定します。, measureText()を使うと表示する文字列が必要とする幅を事前に調べることができます。measureText()は、引数で表示したい文字列を渡します。戻り値の TextMetricsオブジェクトのwidthプロパティが、文字列を表示するのに必要な幅となります。, Filters for EaselJSにDropShadowFilterを追加したよ.

JavaScriptでテキストを表示. HTML5 Canvas API を使って、テキストを描画します。テキストの枠線のみ描画する場合はstrokeText() メソッド、 テキストを塗りつぶす場合は fillText() メソッドを使います。プロパティはfont、textAlign、strokeStyle、fillStyle 等を使用します。 今回の記事では「strokeRect」や「lineWidth」などというようなメソッドを使うことがあります。 これらの使い方については前回の記事でも紹介しているので説明は省略しているので、わからない場合はあらかじめ確認しておいてください。 今回紹介するコードを記述することによって、以下のような文字を描画することができるようになります。 ではまず、htmlを作成していきましょう。

先日、Canvasを使ってWeb上に星や直線、円などを描画する方法を紹介しました。, 実はCanvasには「fillText」というメソッドを用いることで「文字」を書くこともできるので紹介します。, 今回の記事では「strokeRect」や「lineWidth」などというようなメソッドを使うことがあります。, これらの使い方については前回の記事でも紹介しているので説明は省略しているので、わからない場合はあらかじめ確認しておいてください。, 今回紹介するコードを記述することによって、以下のような文字を描画することができるようになります。, htmlを用意するといっても、必要なコードは1文だけなのでぱぱっと作成してしまいましょう。, javascript や stylesheetの読み込みなどは各自指定しないと機能しないので注意してください。, , 今回はテキストを表示する実装なので、横長のCanvasを作成しておくと良いと思います。, また、cssで「border: 1px solid black」を当てておくと、canvasの範囲を確認しやすくなります。, これで下準備は完了しましたので、htmlとcssのファイルはもう閉じていただいて大丈夫です。, font = “50px cursive” はcssの「font-size」と「font-family」を指定していると思ってください。, つまり、文字のサイズが50pxで文字のスタイルはcursiveになっているということなので、この値はcssと同じようにカスタマイズできます。, 上で表示したfont-familyは「serif」ですが、他にもいくつか紹介しますので参考にしてみてください。, とはいっても、テキストを描画するという今回の内容には関係ないので適当に選んでください。, fillText( “文字”, x, y) というように指定することで、文字を表示できるようになります。, canvasのサイズや位置によっては、全く同じコードだと文字の場所がずれてしまう可能映画あります。, 座標が正しければ文字が表示されるのですが、冒頭で紹介した完成画像とは少し違っていますよね。, 完成系の画像では文字の外枠に色をつけているため、雰囲気が違って見えていると思います。, fillTextで描画した文字に外枠をつけるためには、「fillRect、strokeRect」と同じように「fillは塗りつぶし」「strokeは枠のみ」というようになっています。, ですので、同じように「strokeText」を使うことで、テキストにも外枠をつけることができるようになります。, 先ほど作成したコードをこのように書き換えることで、文字に外枠をつけることができました。, strokeStyleで枠の色を指定して、strokeText( )で表示する文字を指定しています。, strokeTextのテキストや座標は、fillTextと同じものにしないと外枠にならないので揃えるようにしてください。, fillStyle( ) と fillText( ) をもう1つ記述して、元のテキストから少しずらして描画することで「影」のように見せることができます。, 影が一番後ろに描画されるようにするために始めに記述して、座標を少しずらして描画しています。, 同じようにすれば、文字だけではなく図形などにも影をつけることができますので、試してみてください。, ちなみに、今回の方法では同じテキストを作成し、影のように見せているのですがCanvasにはもともと影をつけるコードというものが存在しています。, 今回紹介した方法ではCanvasに「文字」を描画でき、その描画した文字をカスタマイズできるようになりました。, 文字のカスタマイズは「フォント」や「色」「影」など自由なカスタマイズができますので、ぜひ試してみてください。, プログラミングやガジェットレビュー, 便利なアプリの紹介など幅広く雑多に記録するブログ。.