Javascript 检索存储在数组中的文本行并将其显示在具有换行符的画布上？

下面是一个数组，它的元素存储一些长文本行

var fcontent = [
["Definition: The term computer is obtained from the word compute. A computer is an electronic device that inputs (takes in) facts (known as data), and then processes (does something to or with) it. Afterwards it outputs, or displays, the results for you to see. Data is all kinds of facts, including, pictures, letters, numbers, sounds, etc."],

["Moreover: A computer is a system that is made up of a number of components. Next is a diagram of a computer system with some of its components"],
]; 

我使用以下函数在画布上显示元素：

firstLevelContent:function()
{
    var startPoint = 48;  $('.gamelayer').hide();
    $('#gamecanvas').show();       
    for (var i=0; i<fcontent.length; i++)
    {
        game.context.strokeRect(1,  25, 637, 385);
        game.context.fillStyle = 'brown';
        game.context.font = 'bold 20px sans-serif';
        game.context.textBaseline = 'bottom';
        game.context.fillText(fcontent[i], 2, startPoint);
        startPoint+=17;
    }
},

firstLevelContent:function（）
{
var startPoint=48；$（'.gamelayer'）.hide（）；
$（“#游戏画布”）.show（）；
对于（var i=0；i，您需要一个自动换行功能，将文本分隔成合适的长度行。关于如何做到这一点，还有其他一些建议，但似乎大多数建议都不能正确解释过长的单词（即单个单词的长度超过所需的宽度）或空白（也就是说，大多数假设单词之间只有一个空格）。我想了想，得出了以下结论：

function wordWrap(text, width, ctx, useHyphen) {
    var words = text.split(/\b(?=\w)/),
        wrappedText = [],
        wordLength = 0,
        fullLength = 0,
        line = "",
        lineLength = 0,
        spacer = useHyphen ? "-" : "",
        spacerLength = ctx.measureText(spacer).width,
        letterLength = 0;

    // make sure width to font size ratio is reasonable
    if (ctx.measureText("M"+spacer).width > width) {return [];}

    // produce lines of text
    for (var i=0, l=words.length; i<l; i++) {

        wordLength = ctx.measureText(words[i].replace(/\s+$/,"")).width;
        fullLength = ctx.measureText(words[i]).width;

        if (lineLength + wordLength < width) {
            line += words[i];
            lineLength += fullLength;
        } else if (wordLength < width) {
            wrappedText.push(line);
            line = words[i];
            lineLength = fullLength;  
        } else {
            // word is too long so needs splitting up

            for (var k=0, lim=words[i].length; k<lim; k++) {

                letterLength = ctx.measureText(words[i][k]).width;

                if (words[i][k+1] && /\S/.test(words[i][k+1])) {

                    if (lineLength + letterLength + spacerLength < width) {
                        line += words[i][k];
                        lineLength += letterLength;
                    } else {
                        if (true || words[i][k+1] && /\s/.test(words[i][k+1])) {line += spacer;}
                        wrappedText.push(line);
                        line = words[i][k];
                        lineLength = letterLength;
                    }

                } else {
                    // last 'letter' in word

                    if (lineLength + letterLength < width) {
                        line += words[i].substr(k);
                        lineLength += ctx.measureText(words[i].substr(k)).width;
                    } else {
                        line += spacer;
                        wrappedText.push(line);
                        line = words[i].substr(k);
                        lineLength = ctx.measureText(words[i].substr(k)).width;
                    }

                    break;

                }


            }

        }
    }

    wrappedText.push(line);

    // strip trailing whitespace from each line
    for (var j=0, len=wrappedText.length; j<len; j++) {
        wrappedText[j] = wrappedText[j].replace(/\s+$/,"");
    }

    return wrappedText;

}

函数换行符（文本、宽度、ctx、使用连字符）{
var words=text.split（/\b（？=\w）/），
wrappedText=[]，
字长=0，
全长=0，
第“”行，
线宽=0，
间隔符=使用连字符？-：“”，
垫片长度=ctx.measureText（垫片）。宽度，
字母长度=0；
//确保宽度与字体大小的比例合理
if（ctx.measureText（“M”+间隔符）.width>width）{return[]；}
//产生一行行文字
对于（var i=0，l=words.length；这不是javascript问题。您需要做的只是在css中为画布指定一个宽度。您能给我看一下您用于画布的css吗？如果有正确的css类，文本将自动适合他的宽度。@Georgianburngiu。不，html画布不会自动应用换行符来适合文本的宽度画布宽度。您必须使用javascript手动进行文本换行。您可以使用context.measureText方法获取每个单词的宽度。当累积的单词超过画布长度时，请开始一行新的单词。查看前面关于如何在html画布上将文本换行的Stackoverflow答案：单词在音节处连字符打断，这样你就可以通过在元音后的第一个辅音后打断来稍微改进你的断字。@markE是的，说得好。如果我有时间，我可能会处理这个问题。我尝试了你的函数，但显示为空白。参数传递有什么问题吗：game.wrapText（fcontent[i]，maxWidths，game.context，true）；？提示：fcontent是要换行的文本，maxWidths是画布的宽度，game.context是画布的上下文。谢谢。@user2896649你能做一个小提琴演示一下你是如何使用它的吗？请耐心听我说，我是js和jquery的新手。我就是这样使用它的：game.context.strokeRect（1,25637385）；game.context.fillStyle='brown'；game.context.font='bold 20px sans serif'；game.context.textbreeline='bottom'；ctx=game.context；var text=fcontent[i]；maxWidths=620；var textLines=game.wrapWord（text，maxWidths，ctx，true）；for（var i=0，l=textLines.length；i