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";

欲了解更多信息，这里有一些资源：

于 2011-03-01T17:44:04.860 回答
14

对于任何偶然发现这一点的人来说，请注意：请务必遵循已接受答案中显示的顺序。

当我有错误的顺序时，我遇到了一些跨浏览器问题。“10px Verdana bold”在 Chrome 中有效，但在 IE 或 Firefox 中无效。将其切换为“bold 10px Verdana”，如所示解决了这些问题。如果遇到类似问题，请仔细检查订单。

于 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

所以没有办法只在一个 JS 命令中设置font-weight（或font-size或...）？font-family这一切都必须在一个完整的字体字符串中？

于 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 回答