【HTML5游戏开发小技艺】RPG情景对话中，令文本逐字输出

【HTML5游戏开发小技巧】RPG情景对话中，令文本逐字输出

以前用javascript实现过令文本逐字输出的效果，今天我来用html5中的canvas实现一下。canvas里的内容可不像<p>那样好操作，首先，你需要懂得一些html5的API才能操作canvas，而<p>可以用DOM直接操作，相对而言，canvas还是要比<p>复杂些。那么本篇就为大家讲述入股令文本逐字输出。

首先我先说明，本篇我不打算用任何引擎，因为今天我们是来研究技巧和原理的。

做一个富有技巧的程序我们首先得搞清楚原理，而令文本逐字输出的原理很简单。

假如我们有一串字符，我们可以把它们分成一个个字符，然后装入数组。例入有一个字符串yorhom，那么我们可以把他分成

今天是清明节，但由于这个节日太xx了，所以我就不祝大家清明节快乐了。
----------------------------
欢迎大家转载我的文章。
转载请注明：转自Yorhom's Game Box
欢迎继续关注我的博客
6楼ssrc0604hx昨天 09:33
/**nt一个逐字输出的文字对象nnt@param context 2D画布nt@param text    需要现实的文字nt@param time    n*/nfunction AnimateText(context, text, time){ntvar ME = this;nntthis.context = context;ntthis.text = text;ntthis.time = time;nntthis.index = 0;nntthis.timer = setInterval(nttfunction(){ntttME.update();ntttME.print();ntt},nttthis.timent);nntthis.update = function(){nttthis.index ++;nttif(this.index > this.text.length){ntttthis.stop();ntt}nt}nntthis.print = function(){nttthis.context.save();nnttthis.context.font = "15px 宋体";nttthis.context.fillStyle = "#0000fa";nttthis.context.fillText(ntttthis.text.substring(0, this.index), 0, 40ntt);nnttthis.context.restore();nt}nntthis.stop = function(){nttif(this.timer){ntttclearInterval(this.timer);ntt}nt}n}
Re: yorhomwang昨天 11:27
回复ssrc0604hxn你切割文字用的是substring的方法吗？其实最好用split，因为substring在某些浏览器上不兼容。不过现在只要支持html5的浏览器都应该能支持substring吧。
Re: ssrc0604hx昨天 16:45
回复yorhomwangn这种情况暂时没有碰到。因为考虑到是现实text的一个子串，就用了substring这个方法，嘻嘻
5楼h270768095昨天 08:46
学习了
4楼u010172962昨天 23:51
学习了
3楼html5_lover昨天 23:49
真的很不错，以前一直不知道怎么实现，看了总算明白了
2楼ylbxsdn昨天 23:39
看来html5将淘汰asp php之流
Re: yorhomwang昨天 23:39
回复ylbxsdnn现在HTML5效率还不是很高，至于取代asp和php要看HTML5以后发展如何了。
1楼ssrc0604hx昨天 23:35
LZ 谈得不错。你的方法比较适合canvas不刷新的情况。n我模仿LZ写了一个，可以在canvas刷新的时候一样使用：nvar canvas = null;//画布元素nvar context = null;//nnwindow.onload = function(){ntif(buildCanvas("mycanvas")){nttvar str = "Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言";nttnew AnimateText(context, str, 80);nt}n}nn/**n初始化canvas对象n成功则返回truen*/nfunction buildCanvas(id){ntcanvas = document.getElementById(id);ntif(canvas){nttcontext = canvas.getContext("2d");nnttreturn context != null;nt}ntelse{nttalert("canvas 对象不能为空!");nttreturn false;nt}ttn}