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

Question

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

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

但是如何将文本更改为粗体、斜体或两者兼而有之？有什么建议来修复这个简单的例子吗？

Answer 1

来自 MDN 文档 CanvasRenderingContext2D.font ：

Canvas 2D API 的 CanvasRenderingContext2D.font 属性指定绘制文本时要使用的当前文本样式。此字符串使用与 CSS 字体 说明符相同的语法。< /p>

因此，这意味着以下任何一种方法都可以：

ctx.font = "italic 10pt Courier";

ctx.font = "bold 10pt Courier";

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

以下是一些额外资源，可提供更多信息：

• 深入了解 HTML5
• HTML5 画布 - 基础知识

Answer 2

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

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

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 >画布>绘制文本
• 用斜体设置单个单词的格式

Answer 4

无法通过任何画布方法或属性添加下划线。但我做了一些工作来完成它。您可以查看@ http://scriptstock.wordpress .com/2012/06/12/html5-canvas-text-underline-workaround

您可以在此处找到实现 http://jsfiddle.net/durgesh0000/KabZG/