HTML5问题

Question

var _canvas = document.getElementById('cansStage');
var _context = _canvas.getContext("2d");
_context .fillText('hello world   llo world'llo world'llo world'llo world'llo world'', 16, 16); //
无法换行呀，伤不起

Answer 1

CANVAS的一个不完美之处 要不设置一下width试下或者另起一行！

Answer 2

已经加了宽度，没效果。
这个canvas是绘图的，所有可能\r\n无效果
难道换行要重新绘制吗？
这个是网站 http://www.iseefor.com/Html5_one.html帮我看看如何换行。

Answer 3

Html5 canvas貌似没有支持换行操作，不过你可以自己实现一个。例如：
function getLines(text, maxWidth) {
var returns = text.split("\n");
var lines = [];
var lastPhrase = "";
function splitWord() {
var width = measureText(lastPhrase).width;
var posA = 0;
var posZ = 0;
if (width > maxWidth) {
for (var n = 0, length = lastPhrase.length; n < length; n ++) {
var width = measureText(lastPhrase.substr(posA, posZ ++)).width;
if (width > maxWidth) {
lines.push(lastPhrase.substr(posA, posZ - 2));
posA = n - 1;
posZ = 2;
}
}
return lastPhrase.substr(posA, posZ + 2);
}
};
for (var n = 0; n < returns.length; n++) {
if (lastPhrase) lines.push(lastPhrase);
var phrase = returns[n];
var spaces = phrase.split(" ");
var lastPhrase = "";
for (var i = 0; i < spaces.length; i++) {
var measure = measureText(lastPhrase + " " + spaces[i]).width;
if (measure < maxWidth) {
lastPhrase += ((lastPhrase ? " " : "") + spaces[i]);
} else {
if (measure > maxWidth) {
var split = splitWord();
if (split) {
lastPhrase = split + " " + spaces[i];
} else {
lines.push(lastPhrase);
lastPhrase = spaces[i];
}
}
}
if (i == spaces.length - 1) {
lines.push(lastPhrase);
lastPhrase = "";
break;
}
}
}
return lines;
};
然后这样调用：
var lines = getLines(text + " ", maxWidth);
for (var n = 0, length = lines.length; n < length; n ++) {
ctx.fillText(lines[n], 0, (n * bboxHeight) + offsety);
}
希望对你有所帮助