HTML5キャンバステキストを太字または斜体にスタイル設定するにはどうすればよいですか？

83

私は非常に簡単な方法でテキストをキャンバスに印刷しています：

var ctx = canvas.getContext('2d');
ctx.font = "10pt Courier";
ctx.fillText("Hello World", 100, 100);

しかし、テキストを太字、斜体、またはその両方に変更するにはどうすればよいですか？その簡単な例を修正するための提案はありますか？

— リッチー
ソース

154

これらのいずれかを使用できます。

ctx.font = "italic 10pt Courier";

ctx.font = "bold 10pt Courier";

ctx.font = "italic bold 10pt Courier";

詳細については、次の2つのリソースを参照してください。

— ドーナツ
ソース

2

Argが、より多くの情報のため、それに+1グレートサイトを私を倒すdiveintohtml5.org/canvas.html#divingin

— Loktar

@Loktarリンクをありがとう、答えにそれを含めました。

— ドーナツ2011年

：下線に関するstackoverflow.com/questions/4627133/...

— jedierikb

4

また、フォントの太さを指定することができますctx.font = "400 10pt Courier"

— イワンP

ctx.font = "400 10pt Open Sans"最新のブラウザバージョンでCalibriまたはOpenSansを使用しているChromeでは、フォントの重みが機能しませんでした

— sean2078

12

これに遭遇した人のために、追加の注意が必要です。受け入れられた回答に示されている順序に必ず従ってください。

注文を間違えたときに、クロスブラウザの問題が発生しました。「10pxVerdanabold」はChromeで機能しますが、IEやFirefoxでは機能しません。示されているように「太字の10pxVerdana」に切り替えると、これらの問題が修正されました。同様の問題が発生した場合は、順序を再確認してください。

— tddawson
ソース

ChromeはFirefoxと一致するように変更されたようです。このペンを参照してください：codepen.io/anon/pen/BXNZxO

— ecc5 2119

2

では、1つのJSコマンドで設定font-weight（font-sizeまたはfont-family...）する方法はありませんか？すべてが1つの完全なフォント文字列である必要がありますか？

— ジョナサン・ツズマン
ソース

1

キャンバスのメソッドまたはプロパティでは、下線を引くことはできません。しかし、私はそれを成し遂げるためにいくつかの回避策を行いました。あなたはそれを@http ：//scriptstock.wordpress.com/2012/06/12/html5-canvas-text-underline-workaroundでチェックすることができます

ここで実装を見つけることができますhttp://jsfiddle.net/durgesh0000/KabZG/

— ダージッシュ
ソース