如何將 HTML5 canvas 文本設置為粗體和/或斜體？

Question

我以非常直接的方式將文本打印到 canvas：

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

但是如何將文本更改為粗體、斜體或兩者兼而有之？ 有什么建議可以解決這個簡單的例子嗎？

Answer 1

您可以使用以下任何一種：

ctx.font = "italic 10pt Courier";

ctx.font = "bold 10pt Courier";

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

欲了解更多信息，這里有一些資源：

• 深入 HTML5
• 如何在畫布中顯示文本
• HTML5 畫布 - 基礎知識

Answer 2

對於偶然發現此問題的任何人，請額外提醒一下：請務必遵循已接受答案中顯示的順序。

當我有錯誤的訂單時，我遇到了一些跨瀏覽器的問題。 “10px Verdana bold”在 Chrome 中有效，但在 IE 或 Firefox 中無效。 按照指示將其切換為“bold 10px Verdana”可以解決這些問題。 如果遇到類似問題，請仔細檢查訂單。

Answer 3

無法通過任何畫布方法或屬性添加下划線。 但我做了一些工作來完成它。 您可以查看@ http://scriptstock.wordpress.com/2012/06/12/html5-canvas-text-underline-workaround

你可以在這里找到實現http://jsfiddle.net/durgesh0000/KabZG/

Answer 4

所以沒有辦法只在一個 JS 命令中設置font-weight （或font-size或font-family ......）？ 這一切都必須在一個完整的字體字符串中嗎？

Answer 5

如果您需要允許格式的變化，您可以設置字體樣式、繪制文本、使用measureText對其進行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>

進一步閱讀

• MDN > 畫布 > 繪圖文本
• 用斜體格式化單個單詞