运用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>