HTML5手習い

テキストの描画

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
レンダリングコンテキストのfontプロパティでテキストのサイズや色などを指定し、fillText,strokeTextメソッドでテキストを描画する方法について学びます。また、measureTextでテキストの描画サイズを計算する方法についても説明します。
講師:
05:02

字幕

このレッスンでは Canvas にテキストを 描画する方法について学びます まず初めにアセットの canvas_basic.html を Chrome とテキストエディタで 開いておいて下さい キャンバスに描画されるテキストの プロパティは Context オブジェクトの font プロパティで 指定できます また Canvas にテキストを描画するには fillText メソッドと strokeText メソッドを 使います それぞれ1番目のパラメータに 描画する文字列 2番目と3番目に文字列の基点 そして4番目のパラメータとして 文字列の最大幅をピクセル数で指定します 4番目のパラメータを指定した場合には もし描画するテキストがその maxWidth に おさまらない場合には 自動的により小さなフォントが選ばれます また measureText メソッドを使って 現在設定されているプロパティで 特定の文字列を描画した場合に そのピクセル幅がいくつになるかを 計算することができます それでは実際に描画してみましょう まずは JavaScript Console を開きます Mac の方は Command+Option+I Windows の方は Ctrl+Shift+I です まず Canvas に描画する為に Context オブジェクトを 取得する必要があります context = document.getElementById canvas の名前は sketch となっています そして立て続けに getContext を呼び出し 2d コンテキストを取得します これで Context オブジェクトが 取得できました 初期状態では context の font プロパティは このように 10 px sans-serif 体という 指定になっています fillText を使えば 例えば Hello World! という文字を左上に テキストの基点は 文字の左下が基点になっていますので 画面1番上に表示させる場合には 少し下にずらしてやる必要があります 10 ピクセル 下にずらしましょう そして4番目のパラメータは 省略しておきます このように Hello World! という 文字列が表示されました もう少し文字サイズを大きくしてみましょう font プロパティの指定で 例えば 40 ピクセル sans-serif 体 という指定にしてみます 再度描画してみると もう少し下にずらした上で再度描画 このように大きな文字が表示されました 今度は文字の外枠のみ描画してみましょう stroke メソッドを使えばできます 先程と重ならないように 少し下にずらした上で このように文字の外枠が描画されました fillStyle や strokeStyle を使えば 文字の描画色を変えることができます context.fillStyle = green としてみましょう そして fillText で もう少し下の位置  120 ピクセル目から このように緑で描画されました strokeStyle を変更すれば 今度は red にしてみましょう そして strokeText を もう少し下にずらして再度描画 このように赤い枠が表示されました また measureText メソッドを使えば このように 現在の設定値では Hellow World! という文字列が 251 ピクセルで描画されることが分かります これは自分でテキストのレイアウト処理などを 書く場合に必要になるでしょう このレッスンでは Canvas に文字列を 描画する方法について学びました

HTML5手習い

このコースではHTML5 APIを中心に、HTML5でのプログラミングについて学びます。HTTPや文字コード、バイナリデータやアニメーションの原理など実際のアプリケーション開発で必要となる基本的な知識を学びます。HTML5 Canvasを中心として、Web APIとの通信やWebフォントなどWebプログラミングで必要な技術を習得します。

6時間01分 (44 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年04月22日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。