HTML5 Canvas 打字机效果与自动换行？

我正在尝试在 HTML5 Canvas 上获得动画打字机效果，但我真的很难处理自动换行。

这是我的 Shapes.js 要点：https://gist.github.com/Jamesking56/0d7df54473085b3c5394 https://gist.github.com/Jamesking56/0d7df54473085b3c5394

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

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

有人可以指导我最好的方法是什么吗？

我用过的一个解决方案大致是：

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
}

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