html5画布绘制具有多种字体的文本

Question

如何使用多种字体在画布中填充文本。 我可以这样填写画布：

这是我想做的示例

这是我想做的另一个示例

我知道我可以删除刺痛并首先填充普通文本，然后是粗体文本，然后是其余文本。但我希望能够拖放文本，所以我不能那样做。

Answer 1

对不起，你运气不好。没有捷径可走。

如果你想要在中心有一个粗体字的文本，你必须调用 drawtext 至少 3 次。

将来可能会有一段时间允许您绘制任意 html，规范提到这是一种真正的可能性，但在一段时间内不会。引用规范：

注意：2D 上下文 API 的未来版本可能会提供一种将使用 CSS 渲染的文档片段直接渲染到画布的方法。这将优先于进行多行布局的专用方式提供。

来自the end of this section。

当然，您仍然可以拖放，您只需要有一个组成“节点”的元素列表及其位置。毫无疑问，在画布中完成了更复杂的对象。