如何将HTML5画布文字设置为粗体和/或斜体？(How do I style HTML5 canvas text to be bold and/or italic?)

如何将HTML5画布文字设置为粗体和/或斜体？(How do I style HTML5 canvas text to be bold and/or italic?)

我以一种很直接的方式将文字打印到画布上：

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

但是，如何将文本更改为粗体，斜体或两者？ 有什么建议来解决这个简单的例子？

I'm printing text to a canvas in a pretty straight forward way:

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

But how can I change the text to bold, italic or both? Any suggestions to fix that simple example?

最满意答案

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

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

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

深入HTML5 如何在画布中显示文字 HTML5画布 - 基础知识

You can use any of these:

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

For further information, here are a couple of resources:

Dive into HTML5 How to display text in canvas HTML5 canvas - the basics