javascript - 带有自动换行的 HTML5 Canvas 打字机效果？

Question

我想在 HTML5 Canvas 上获得动画打字机效果，但我真的很难处理 Word Wrapping。

这是我在 Gist 中的 Shapes.js:https://gist.github.com/Jamesking56/0d7df54473085b3c5394

在那里，我创建了一个 Text 对象，它有很多方法。其中之一称为 typeText()。

typeText() 基本上从打字效果开始，但它一直在下降，我真的很难找到一种修复自动换行的方法。

谁能指导我最好的方法是什么？

Answer 1

我用过的一个方案大致是:

var maxWidth = 250;
var text = 'lorem ipsum dolor et sit amet...';

var words = text.split(' ');
var line = [words[0]]; //begin with a single word

for(var i=1; i<words.length; i++){
    while(ctx.measureText(line.join(' ')) < maxWidth && i<words.length-1){
        line.push(words[i++]);
    }
    if(i < words.length-1) { //Loop ended because line became too wide
        line.pop(); //Remove last word
        i--; //Take one step back
    }
    //Ouput the line
}

由于似乎无法测量输出文本的高度，您需要手动将输出的每一行偏移一些硬编码的行高。