在 HTML5 Canvas 上使用字体样式答案

【问题标题】：Use Font Style on HTML5 Canvas在 HTML5 Canvas 上使用字体样式
【发布时间】：2013-01-10 05:41:18
【问题描述】：

我正在尝试使用动态 JS 库在画布上添加文本。 Kinetic JS 提供setFontStyle() 方法来支持字体样式。

根据文档，它支持“正常”、“斜体”或“粗体”。但是，如果我想同时应用粗体和斜体，我该怎么办。我还想在文本下划线。我如何在动力学 JS 中做到这一点。

没有人告诉我:'(

【问题讨论】：

不确定 Kinetic 但在 Fabric.js 中，您可以使用：new fabric.Text('your text', { fontWeight: 'bold', 'fontStyle': 'italic', textDecoration: 'underline' })。请参阅this article 了解更多信息。
你不能像使用 css 类一样应用多种样式吗？试试 setFontStyle('bold italic');
至于下划线，我认为你必须在文本下方创建一条线，不要认为 kineticjs 还支持它。

【解决方案1】：

就像前面提到的 EliteOctagon 一样，KineticJS 还不支持下划线文本。这主要是由于 html canvas 元素不支持文本修饰（包括下划线）。

添加（多种）字体样式，相对容易。最推荐的方法是在初始化时定义它，如下所示：

var text = new Kinetic.Text({
    x: 0,
    y: 0,
    fontSize: 20,
    fontStyle: 'bold italic'
    fill: 'black',
});

如果您需要在其他时间设置不同的字体样式而不是启动，您可以使用您提到的方法setFontStyle()。比如这样：

var text = new Kinetic.Text();
text.setFontStyle('bold italic');

【讨论】：