web-dev-qa-db-ja.com

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

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

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

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

javascripthtml5canvastypography
69
Ritchie

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

ctx.font = "italic 10pt Courier";

ctx.font = "bold 10pt Courier";

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

詳細については、次のリソースをご覧ください。

129
Donut

これに出くわした人のために、もう1つだけ注意が必要です。必ず、受け入れられた回答に示されている順序に従ってください。

注文が間違っていたときに、クロスブラウザの問題が発生しました。 「10px Verdanaボールド」はChromeでは機能しますが、IEまたはFirefoxでは機能しません。示されているように「bold 10px Verdana」に切り替えると、これらの問題が修正されます。問題。

11
tddawson

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

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

1
Durgesh