canvas打字效果

运用fillText，写的打字效果。

唯一麻烦的地方是，换行问题，

我是把字符串转化为数组，数组一个单位完成，就换行，继续下一个单位。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
<style type="text/css">
canvas { border: 1px solid black; }
#change{width:200px; line-height:30px; color:#fff; text-align:center; background:blue;}
</style>
<script type="text/javascript" charset="utf-8">
var text = "东临碣石，以观沧海。|水何澹澹，山岛竦峙。|树木丛生，百草丰茂。|秋风萧瑟，洪波涌起。|日月之行，若出其中。|星汉灿烂，若出其里。|幸甚至哉，歌以咏志。";
var arr = text.split("|");
var line = 0;
var timer = 0;
var i = 0;
var newText = "";

function Typing(id) {
    var canvas = document.getElementById(id);
    if (canvas == null) {
        return false;
    }
    scrollit();
}

function scrollit() {
    newText = arr[line].slice(0, i++) + "_";
    var context = canvas.getContext("2d");
    // 擦除文字
    context.clearRect(0, 20 + line * 30, 600, 20 + 30 * (line + 1));
    var gradient = context.createLinearGradient(0, 0, 200, 0);
    gradient.addColorStop("0", "magenta");
    gradient.addColorStop("0.5", "blue");
    gradient.addColorStop("1.0", "red");
    context.fillStyle = gradient;
    context.font = "20px Verdana";
    context.textBaseline = "hanging";

    if (i > arr[line].length) {
        newText = arr[line].slice(0, arr[line].length);
        context.fillText(newText, 30, 20 + 30 * line);
        // 换行
        i = 0;
        line++;
        if (line < arr.length) {
            clearTimeout(timer);
            scrollit();
        };
    } else {
        context.fillText(newText, 30, 20 + 30 * line);
        timer = setTimeout(scrollit, 200);
    }
}

window.onload = function() {
    Typing("canvas");
}
</script>
</head>

<body>
<canvas id="canvas" width="600" height="400"></canvas>
<img id="newImg" src="" alt="" widt="100" height="100">
<div id="demo">hh</div>
</html>