如何在 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);
}
HTML5 的画布不支持多行文本绘制，因此对对齐类型没有实际影响。
如果你想支持换行，你必须自己支持，你可以在这里看到之前的讨论：HTML5 Canvas - 我可以在 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++;
}
}
那里不支持对齐或理由，您必须将其添加到
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
