日記はここで終わっている
テキスト。もちろんcanvasにも文字だって表示できます。
context.fillText(text,x,y[,maxWidth])
fillがついていますので、塗りつぶし文字です。
塗りつぶし文字ってなんだかあまり聞かないですが、つまり普通の文字です
テキストの描画は現在のパスには影響を与えません。 また、影・透明度・切り抜き・合成の対象となります。
text
表示したいテキストをここに記述します。
x y
テキストを表示させる座標位置を指定してあげましょう。
maxWidth
これはオプションですが、設定することで、テキストの表示幅を指定することができます。
テキストは折り返されるわけではなく、縮小されます。
var canvas1 = document.getElementById('canvas01'); canvas1.width = 400; canvas1.height = 200; if (canvas1.getContext) { var context1 = canvas1.getContext('2d'); context1.beginPath(); context1.font = "30px 'MS ゴシック'"; context1.fillText('テキスト1領域指定',50,50,70); context1.fillText('テキスト2領域指定しない',0,90); }
さてさて、こんな感じですね。
テキスト装飾やらフォントは追ってやります。
注目いただきたいのは、文字列じゃなくあくまでも描画なわけで。つまり、コピペできないしソース表示してもない
保護したいテキスト、歌詞なんかは重宝しますね。
context.strokeText(text,x,y[,maxWidth])
同じ文字ですが、少し違う方法、塗りつぶしとくれば、輪郭。つまり中抜き文字ってことですかね
引数に関してはfillTextと一緒です。
var canvas2 = document.getElementById('canvas02'); canvas2.width = 400; canvas2.height = 200; if (canvas2.getContext) { var context2 = canvas2.getContext('2d'); context2.beginPath(); context2.font = "30px 'MS ゴシック'"; context2.strokeText('テキスト1領域指定',50,50,70); context2.strokeText('テキスト2領域指定しない',0,90); }
フォントの指定
デモでも使ってたりしますが、フォントの指定等をある程度できるように用意されています。
context.font=pram
色々なフォント指定を行うことができます。
指定内容はCSSのfontと同じです。
var canvas3 = document.getElementById('canvas03'); canvas3.width = 400; canvas3.height = 200; if (canvas3.getContext) { var context3 = canvas3.getContext('2d'); context3.beginPath(); context3.font = "bold large/150% 'Gyate_FONT'"; context3.fillText('テキスト1',150,50); context3.font = "bold 30px 'メイリオ'"; context3.fillText('テキスト2',50,100); }
context.textAlign=pram
その名の通り、テキストの位置を指定することができます。
- start
- 開始揃え(デフォルト)
- end
- 終了位置揃え
- left
- 左揃え
- right
- 右揃え
- center
- 中央揃え
var canvas4 = document.getElementById('canvas04'); canvas4.width = 400; canvas4.height = 200; if (canvas4.getContext) { var context4 = canvas4.getContext('2d'); context4.beginPath(); context4.textAlign = "start"; context4.fillText('テキスト_start',150,30); context4.textAlign = "end"; context4.fillText('テキスト_end',150,60); context4.textAlign = "left"; context4.fillText('テキスト_left',150,90); context4.textAlign = "right"; context4.fillText('テキスト_right',150,120); context4.textAlign = "center"; context4.fillText('テキスト_center',150,150); }
context.textBaseline=pram
テキストのベースラインを設定することができます。
- top
- emスクエアの上端
- hanging
- 「आ」のような文字が固定される位置
- middle
- emスクエアの中間
- alphabetic
(デフォルト) - アルファベットのベースライン(初期値)
- ideographic
- 漢字など表意文字のベースライン
- bottom
- emスクエアの下端
var canvas5 = document.getElementById('canvas05'); canvas5.width = 1090; canvas5.height = 200; if (canvas5.getContext) { var context5 = canvas5.getContext('2d'); context5.beginPath(); context5.font = "bold 20px 'Gyate_FONT'"; context5.textBaseline = "top"; context5.fillText('あアAa1_top',10,30); context5.textBaseline = "hanging"; context5.fillText('あアAa1_hanging',130,30); context5.textBaseline = "middle"; context5.fillText('あアAa1_middle',300,30); context5.textBaseline = "alphabetic"; context5.fillText('あアAa1_alphabetic',460,30); context5.textBaseline = "ideographic"; context5.fillText('あアAa1_ideographic',660,30); context5.textBaseline = "bottom"; context5.fillText('あアAa1_bottom',880,30); context5.moveTo(0, 15); context5.lineTo(1090, 15); context5.moveTo(0, 25); context5.lineTo(1090, 25); context5.moveTo(0, 32); context5.lineTo(1090, 32); context5.stroke(); }
context.measureText(text)
このテキストを入れたらどんくらいの長さになるん?を測定できるます。
戻り値はオブジェクトで返ってきます。
TextMetrics.widthで取得できます。