Question

我正以非常直接的方式将文字打印到画布上：

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

有关详细信息，请参阅以下资源：

Answer 2

对于遇到这种情况的任何人来说，还有一个额外的目标：确保遵循接受的答案中显示的顺序。

我订单错误时遇到了一些跨浏览器的问题。 “10px Verdana bold”适用于Chrome，但不适用于IE或Firefox。如图所示，将其切换为“粗体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对其进行度量，设置新样式，然后像这样绘制下一个块：

// 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>

如何将HTML5画布文本设置为粗体和/或斜体？

5 个答案:

进一步阅读