如何在html5 canvas filltext（）方法中呈现html标签？

Question

如何在html5 canvas filltext()方法中呈现HTML标签？

例如，下面是代码的其余部分：

context.fillText(
        "label: " + "hossein" + "<br/>" + "id: " + "52" + "<br/>",
        Math.round(node[prefix + 'x'] + size + 10),
            Math.round(node[prefix + 'y'] - 60)
);

我在代码中使用的<br> html标记正确吗？ 它工作正常吗？

如果不是，我该怎么用？

Answer 1

fillText()方法只能接受纯文本，而不能解析其中的任何标签。 如果您的文本如此简单，则可以创建自己的解析器。

function myFillText(txt, x, y) {

    // get a pseudo height for the font
    var fontParts = context.font.split(' '),
        fontHeight = parseInt(fontParts.length === 2 ? fontParts[0] : fontParts[1], 10),
        // split the text based on HTML5 line-breaks
        txtParts = txt.split('<br>'),
        i = 0;

    // iteate parts and increase line position for each line
    for(; i < txtParts.length; i++) {
        context.fillText(txtParts[i], x, y + i * fontHeight);
    }
}

现在，只需使用以下代码即可：

myFillText("label: " + "hossein" + "<br>" + "id: " + "52" + "<br>",
           Math.round(node[prefix + 'x'] + size + 10),
           Math.round(node[prefix + 'y'] - 60));

在线演示

PS：如果您使用的是HTML5，则可以使用<br>而不使用反斜杠。 反斜杠用于XHTML-或修改解析器以支持其他形式。

Answer 2

您不能在Canvas中使用html标签。 画布具有其自己的一组绘制命令。

正如您所发现的那样，这些绘制命令之一是fillText。

如果要多行画布文本，则必须执行多个fillText命令，并增加每个后续fillText的y坐标。

var x = Math.round(node[prefix + 'x'] + size + 10);

var y = Math.round(node[prefix + 'y'] - 60);

var myLineHeight=16  // space between lines of text

fillText("label: "+"hossein", x,y);

fillText("id: "+"52", x,y+myLineHeight);

fillText("Other stuff", x,y+myLineHeight*2);

fillText("Even more stuff", x,y+myLineHeight*3);