如何在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);