将Html文本添加到Html5 Canvas

Question

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

我想在画布上写这个。

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

我该怎么做？

Answer 1

这应该有帮助

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

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

Answer 2

首先，如果需要，您必须使用@ font-face为画布提供所有字体 然后你必须描述绘制文本所需的所有操作，记住canvas只是一个绘图表面。你必须迭代这些步骤：

1. 指定要使用的字体：context.font =“12px Arial bold”（与CSS字体属性的语法相同）
2. 测量将绘制的字符串以了解下一个字节的位置：context.measureText（txt）.width
3. 绘制文本（填充或描边）：context.fillText（txt，x，y）