如何在HTML5画布中对齐文本？

Question

如何在HTML5画布中对齐文本？

11

我该如何在HTML5画布内对齐文本以实现两端对齐？在下面的代码中，文本可以左/右/居中对齐。我需要设置align="justify"。请建议如何实现？

HTML：

<body onload="callMe()">
    <canvas id="MyCanvas"></canvas>
</body>

JS：

function callMe() {
    var canvas = document.getElementById("MyCanvas");
    var ctx = canvas.getContext("2d");
    var txt = "Welcome to the new hello world example";
    cxt.font = "10pt Arial";
    cxt.textAlign = "left";

    /* code to text wrap*/
    cxt.fillText(txt, 10, 20);
}

- Sangam254

有趣的问题 :). 如果您能更好地格式化您的问题，特别是代码部分，那将会更有帮助 ;) - Jeroen

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Variant · Accepted Answer

HTML5的canvas不支持多行文本绘制，因此对齐类型没有真正的影响。

如果您想支持换行符，请自己实现，您可以在这里查看有关此的先前讨论：HTML5 Canvas - can I somehow use linefeeds in fillText()?

这是我的单词换行/换行符实现：

    function printAtWordWrap(context, text, x, y, lineHeight, fitWidth) {
        fitWidth = fitWidth || 0;
        lineHeight = lineHeight || 20;

        var currentLine = 0;

        var lines = text.split(/\r\n|\r|\n/);
        for (var line = 0; line < lines.length; line++) {


            if (fitWidth <= 0) {
                context.fillText(lines[line], x, y + (lineHeight * currentLine));
            } else {
                var words = lines[line].split(' ');
                var idx = 1;
                while (words.length > 0 && idx <= words.length) {
                    var str = words.slice(0, idx).join(' ');
                    var w = context.measureText(str).width;
                    if (w > fitWidth) {
                        if (idx == 1) {
                            idx = 2;
                        }
                        context.fillText(words.slice(0, idx - 1).join(' '), x, y + (lineHeight * currentLine));
                        currentLine++;
                        words = words.splice(idx - 1);
                        idx = 1;
                    }
                    else
                    { idx++; }
                }
                if (idx > 0)
                    context.fillText(words.join(' '), x, y + (lineHeight * currentLine));
            }
            currentLine++;
        }
    }

在这里没有对齐或调整的支持，您需要自行添加。