如何使HTML5画布的文本加粗或倾斜？

Question

我正在以一种相当直接的方式将文本打印到画布上：

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

但是我该如何将文本变成粗体、斜体或两者结合？有什么建议可以修复这个简单的例子吗？

- Ritchie

Answer 1

从MDN关于CanvasRenderingContext2D.font的文档中得知：

CanvasRenderingContext2D.font属性指定在绘制文本时使用的当前文本样式。这个字符串使用与CSS font相同的语法。

这意味着以下任何一种方式都可以工作：

ctx.font = "italic 10pt Courier";

ctx.font = "bold 10pt Courier";

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

这里有一些额外的资源以获取更多信息：

• 深入HTML5
• HTML5画布基础知识

- Donut

---

Arg 比我先回复了，点赞。这个网站提供更多信息，http://diveintohtml5.org/canvas.html#divingin。 - Loktar

@Loktar 感谢提供链接，已将其包含在答案中。 - Donut

关于下划线：https://dev59.com/qG445IYBdhLWcg3w7ug0 - jedierikb

你可以指定字体的粗细: ctx.font = "400 10pt Courier" - Ivan P

在最新版本的浏览器中，使用Calibri或Open Sans字体时，通过ctx.font = "400 10pt Open Sans"设置字体粗细对我没有起作用。 - sean2078

前两个链接已经失效。 - Yong

Answer 2

提醒一下，对于任何看到此信息的人，请确保按照已接受答案中显示的顺序进行操作。

当我使用错误的顺序时，我遇到了一些跨浏览器的问题。 在Chrome中，“10px Verdana bold”有效，但在IE或Firefox中无效。 根据提示将其改为“bold 10px Verdana”可以解决这些问题。 如果您遇到类似的问题，请仔细检查顺序。

- tddawson

---

Chrome 似乎已经改变，使其与 Firefox 保持一致。请查看此代码片段：https://codepen.io/anon/pen/BXNZxO - ecc521

Answer 3

如果您需要允许格式的变化，您可以设置字体样式，绘制文本，使用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 > Canvas > 绘制文本
• 使用斜体格式化单词

- KyleMit

Answer 4

无法通过任何canvas方法或属性实现下划线。但是我做了一些工作来完成它。您可以在这里查看：http://scriptstock.wordpress.com/2012/06/12/html5-canvas-text-underline-workaround 您可以在此处找到实现方式：http://jsfiddle.net/durgesh0000/KabZG/

- Durgesh