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));

Online demo

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

Answer 2

你不能在Canvas中使用html标签。 Canvas有自己的一组绘图命令。

正如您所发现的那样，其中一个绘图命令是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);

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

2 个答案:

Online demo