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

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

有关详细信息,请参阅以下资源:

• 深入了解HTML5
• 如何在画布中显示文本
• HTML5画布 - 基础知识

Answer 2

对于遇到这种情况的任何人来说,只需要额外注意:请务必遵循接受的答案中显示的顺序.

当我的订单错误时,我遇到了一些跨浏览器的问题."10px Verdana bold"适用于Chrome,但不适用于IE或Firefox.如图所示,将其切换为"粗体10px Verdana"可解决这些问题.如果遇到类似问题,请仔细检查订单.