94

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

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

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

4

5 に答える 5

173

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

ctx.font = "italic 10pt Courier";

ctx.font = "bold 10pt Courier";

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

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

于 2011-03-01T17:44:04.860 に答える
14

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

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

于 2014-07-07T20:52:34.970 に答える
2

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

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

于 2012-06-13T18:22:34.167 に答える
2

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

于 2019-10-01T19:19:49.147 に答える
0

フォーマットのバリエーションを許可する必要がある場合は、フォントスタイルを設定し、テキストを描画し、を使用してそれを測定しmeasureText、新しいスタイルを設定してから、次のように次のブロックを描画できます。

// get canvas / context
var can = document.getElementById('my-canvas');
var ctx = can.getContext('2d')

// draw first text
var text = '99%';
ctx.font = 'bold 12pt Courier';
ctx.fillText(text, 50, 50);

// measure text
var textWidth = ctx.measureText(text).width;

// draw second text
ctx.font = 'normal 12pt Courier';
ctx.fillText(' invisible', 50 + textWidth, 50);
<canvas id="my-canvas" width="250" height="150"></canvas>

参考文献

于 2020-11-19T19:57:04.040 に答える