html - 将 Html 文本添加到 Html5 画布

Question

我从另一个应用程序中获得了来自用户输入的 html 格式的文本。（使用字体 b br ul 等，一个片段中不同的字体和颜色）

我想把它写在画布上。

喜欢context.write("<b>Hello</b> World <font...>more text </font>");

我怎样才能做到这一点？

Answer 1

首先，如果需要，您必须为画布提供您正在使用的所有字体@font-face。

然后你必须描述绘制文本所需的所有操作，记住画布只是一个绘图表面。您必须遍历这些步骤：

1. 指定要使用的字体：（与 CSS 字体属性的语法相同）

   context.font = "12px Arial bold"
   

2. 测量将要绘制的字符串以知道放置下一个字符串的位置：

   context.measureText(txt).width
   

3. 绘制文本（填充或描边）：

   context.fillText(txt, x, y)
   

Answer 2

这应该有帮助

https://developer.mozilla.org/en/Drawing_text_using_a_canvas

尽管您需要从 html 中读取格式并使用此方法重新应用。