javascript - 如何在canvas的fillText方法中解析html标记

Question

我有一个带有标签的 Canvas 元素。每个标签都是使用 fillText 创建的方法。

我希望能够发送这样的文本:“CH₂”，但我没有将其作为最终结果。 <sub>元素未正确解析。我该如何解决这个问题？

下面是一些示例代码:

 var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = "48px serif";
  ctx.fillText("Hello <sub>world</sub>", 10, 50);

<canvas id="canvas" width=500 height=500 ><canvas>

Answer 1

您可以使用 @lipp 在评论中提到的方式解决这个问题 Simon's solution并将已经下标的字符插入到字符串中。

您还可以制作一个简单的解析器来检测一些代码并以不同方式呈现下一段(见下文)。

也可以使用 SVG to use HTML for drawing on canvas ，但它有一些缺点，例如异步行为、有限的内容(在安全机制阻止它被绘制到 Canvas 之前)以及在某些情况下缺乏跨浏览器支持。

解析器示例

这只是一个开始的例子。您可以选择任何代码以及添加新代码等。这只是一种方式，还有许多其他方式......

如果您有 HTML 源字符串，只需用代码替换这些标签，或扩展解析器来处理这些标签。

var ctx = c.getContext("2d"),
    fontSize = 28,
    str = "This string has codes to enable |subscripted| text.";

setFontSize(fontSize);

// parse string
for(var i = 0, x = 10, tx = 0, isSub = false; i < str.length; i++) { // iterate over chars
  if (str[i] === "|") {                                              // special code?
    ctx.fillText(str.substring(tx, i), x, 50 + (isSub ? 7 : 0));     // draw current text seg
    x += ctx.measureText(str.substring(tx, i)).width;                // add width to x
    tx = ++i;                                                        // update start pointer
    isSub = !isSub;                                                  // toggle subscript mode
    setFontSize(isSub ? fontSize * 0.5 : fontSize);                  // set font size
  }
}

ctx.fillText(str.substring(tx, i), x, 50);                           // draw last text part

function setFontSize(sz) {ctx.font = sz + "px sans-serif"}

<canvas id=c width=600></canvas>