Question

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

我希望能够发送这样的文字：＆＃34; CH ₂＆＃34;但我不能将此作为最终结果。 <sub>元素无法正确解析。我该如何解决这个问题？

以下是一些示例代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

你可以在评论Simon's solution中使用@lipp提及来解决这个问题，并将已经存在子脚本的字符插入到字符串中。

您还可以创建一个简单的解析器来检测某些代码并以不同的方式呈现下一个段（参见下文）。

还有可能使用SVG to use HTML for drawing on canvas，但它有其后退，例如异步行为，有限的内容（在安全机制阻止它被绘制到画布之前）并且在某些情况下缺乏跨浏览器支持

示例解析器

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

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

＆＃13;

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"}

＆＃13;

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

＆＃13;

Answer 2

这是一个将html字符串转换为一系列fillText语句的函数。它处理多行字符串，并允许您指定对齐方式（左，右，中）。

Permission Denied

如何在canvas

2 个答案:

示例解析器