以前用javascript实现过令文本逐字输出的效果,今天我来用html5中的canvas实现一下。canvas里的内容可不像<p>那样好操作,首先,你需要懂得一些html5的API才能操作canvas,而<p>可以用DOM直接操作,相对而言,canvas还是要比<p>复杂些。那么本篇就为大家讲述入股令文本逐字输出。
首先我先说明,本篇我不打算用任何引擎,因为今天我们是来研究技巧和原理的。
一,原理
做一个富有技巧的程序我们首先得搞清楚原理,而令文本逐字输出的原理很简单。
假如我们有一串字符,我们可以把它们分成一个个字符,然后装入数组。例入有一个字符串yorhom,那么我们可以把他分成
var arr = ['y','o','r','h','o','m'];
的形式,这样要输出文字的话就可以编历这个数组,然后每隔一段时间就把当前遍历的那个字符输出。这样一来就可以将文字逐渐输出。
光说还不行,我们还得去实现,否则就是纸上谈兵。
二,实现
首先我们看看代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html5输出文字类</title>
<script type="text/javascript">
function type(){
//画布的id
var canvasId = "mycanvas";
//用于输出文字的变量
var sub = 0;
var arr = [];
var time = 0;
//设定文字颜色,字体,大小,x和y坐标
var x = 0;
var y = 50;
var color = "red";
var size = "20";
var font = "宋体";
//设制文字内容
var tosplitFont = "I'm yorhom,这是个令文本逐字显示的小程序";
sub = 0;
arr = tosplitFont.split('');
var c = document.getElementById(canvasId);
var ctx = c.getContext("2d");
ctx.font = size+"px"+" "+font;
ctx.fillStyle = color;
ctx.clearRect(0,0,c.width,c.height);
//循环输出
for(var i=0;i<arr.length;i++){
setTimeout(function(){
ctx.fillText(arr[sub],x,y);
x += ctx.measureText(arr[sub]).width;
sub += 1;
},time);
time += 100;
}
}
</script>
</head>
<body onload="type()">
<canvas width="500",height="300" id="mycanvas"></canvas>
</body>
</html>
这就是包括html和javascript的所有代码,只有46行,看来不怎么难。接下来我将讲解 一下这些纤纤渣渣的代码。
html里的代码不解释,我们直接跳到javascript部分。看看type函数:
function type(){
//画布的id
var canvasId = "mycanvas";
//用于输出文字的变量
var sub = 0;
var arr = [];
var time = 0;
//设定文字颜色,字体,大小,x和y坐标
var x = 0;
var y = 50;
var color = "red";
var size = "20";
var font = "宋体";
//设制文字内容
var tosplitFont = "I'm yorhom,这是个令文本逐字显示的小程序";
sub = 0;
arr = tosplitFont.split('');
var c = document.getElementById(canvasId);
var ctx = c.getContext("2d");
ctx.font = size+"px"+" "+font;
ctx.fillStyle = color;
ctx.clearRect(0,0,c.width,c.height);
//循环输出
for(var i=0;i<arr.length;i++){
setTimeout(function(){
ctx.fillText(arr[sub],x,y);
x += ctx.measureText(arr[sub]).width;
sub += 1;
},time);
time += 100;
}
}
在这里,我解释一下变量sub,time和arr。首先sub是遍历数组的下标,也许你会说可以用控制循环的变量作为下标,其实我也试过,如果用控制循环的变量的来作下标,会出现错误。因为在javascript中的循环会先循环完,然后再慢慢执行里的内容。所以如果你用控制循环的变量的来作下标,那么输出的就一直是最后一个。因此我设定了sub变量,让它在循环内部增加,这样即使循环里最后慢慢执行,那也无妨。
arr是装满被分开的文字的数组,通过split方法赋值。如下:
arr = tosplitFont.split('');
split用法是没遇见参数字符,就将这个字符前面的那一个加到数组中。我表述可能不大清楚,还是让专业人士w3cschool为你解答吧:
http://www.w3school.com.cn/js/jsref_split.asp
time是个控制等待时间的变量,因为setTimeout是在某一个时刻做某事,所以我们需要不断改这个时刻。
接下来我们看输出部分:
//循环输出
for(var i=0;i<arr.length;i++){
setTimeout(function(){
ctx.fillText(arr[sub],x,y);
x += ctx.measureText(arr[sub]).width;
sub += 1;
},time);
time += 100;
}
首先我们先遍历了上述的arr,接下来我们在里面通过setTimeout在某个时刻输出文字。
fillText是什么?我想我只能告诉你是html5中输出文字的东东,看看专业人士的又一讲解:http://www.w3school.com.cn/html5/canvas_filltext.asp
由于html5中如果不是一次性输出文字,文字坐标且不改变,那么文字将叠在一起。所以我们只有改变坐标,由于我们用变量x和y控制文字位置,所以我们只用改变x就能将文字移到它该去的位置。我首先想到了可以将x设定为当前字符传的长度。
但怎么才能算出这个字符传的长度呢?我无意间看到了measureText方法,它可以取出当前字符串的长度,所以我们就利用这个玩意儿算出上个字符长度,然后用x加上这个长度,就可以算出下一个文字该去的位置。measureText怎么用呢,看看这里吧:http://www.w3school.com.cn/html5/canvas_measuretext.asp
就这样,逐字输出就搞定了。
看看效果吧:
http://www.cnblogs.com/yorhom/archive/2013/04/04/3000017.html
三,源码下载
源码在这里:http://files.cnblogs.com/ducle/html5-%E8%BE%93%E5%87%BA%E6%96%87%E5%AD%97.rar
贴几张demo图,不想看代码只想看效果的朋友可以看看:
今天是清明节,但由于这个节日太xx了,所以我就不祝大家清明节快乐了。
----------------------------------------------------------------
欢迎大家转载我的文章。
转载请注明:转自Yorhom's Game Box
欢迎继续关注我的博客
分享到:
相关推荐
Android游戏开发方向游戏全程实战开发(飞行射击类游戏+RPG游戏开发)
D5Rpg 网页游戏开发套件,D5Rpg 网页游戏开发套件,D5Rpg 网页游戏开发套件
这个是日本一个做RPG游戏开发的软件,简单而强大
[游戏开发参考书-用DirectX编写RPG游戏]. Programming.Role.Playing.Games.with.DirectX
C++开发的RPG简易小游戏源代码 本人用C++写的一个RPG小游戏,有打怪、学习技能、升级、接受完成任务的功能,里面一些基本逻辑比较完善,大家感兴趣的可以看看参考参考
制作RPG游戏制作RPG游戏制作RPG游戏制作RPG游戏制作RPG游戏制作RPG游戏制作RPG游戏制作RPG游戏制作RPG游戏制作RPG游戏制作RPG游戏制作RPG游戏制作RPG游戏制作RPG游戏制作RPG游戏制作RPG游戏制作RPG游戏制作RPG游戏...
客户端服务端齐全,并带有工具,仅做学习交流使用!!
该源码仅供学习使用,欢迎访问我的博客:http://blog.csdn.net/crow_html5
Unity 3D的Ultimate MMO RPG Kit 在线 mmo rpg 游戏开发
unity多人RPG游戏源码uMMORPG 2D 1.3,Unity精品游戏源码,UnityRPG游戏源码unity多人RPG游戏源码uMMORPG 2D 1.3,Unity精品游戏源码,UnityRPG游戏源码unity多人RPG游戏源码uMMORPG 2D 1.3,Unity精品游
为你的FLASH游戏制作rpg风格的文本系统
基于C#开发的3D RPG Unity游戏项目源码.zip基于C#开发的3D RPG Unity游戏项目源码.zip基于C#开发的3D RPG Unity游戏项目源码.zip基于C#开发的3D RPG Unity游戏项目源码.zip基于C#开发的3D RPG Unity游戏项目源码.zip...
D5rpg网页游戏引擎D5rpg网页游戏引擎D5rpg网页游戏引擎
c#游戏开发基于unity3d的回合制RPG游戏源码.zipc#游戏开发基于unity3d的回合制RPG游戏源码.zipc#游戏开发基于unity3d的回合制RPG游戏源码.zipc#游戏开发基于unity3d的回合制RPG游戏源码.zipc#游戏开发基于unity3d的...
如果你学习J2ME,这是一个不错的学习对象。 《游戏的故事》源代码 ...RPG游戏的对话系统 关于RPG游戏制作的一些讨论 角色扮演游戏的升级系统研究 角色扮演游戏引擎的设计原理 任务系统 制作手札---RPG是怎样做成的
RPG游戏J2ME代码讲解 第6讲 Java应用大赛作品代码讲解 Tales of Youxi <br>1. 真正的RPG游戏“Tales of Youxi” 我们在这一讲来介绍一款名为“Tales of Youxi”的RPG游戏。它制作精良,称得上是真正...
java swing开发的2D RPG游戏,支持存档,读档。可以用于研究学习。亲测可使用
角色扮演游戏开发,详细讲解如何利用DirectX开发RPG游戏
地图编辑器、角色素材拼合器、D5Rpg底层驱动全部源码 0.纯位图渲染 1.马赛克地图预载 2.纸娃娃系统 3.像素碰撞与矩形区域碰撞检测 4.混合光效 5.公告提示 6.键盘控制,鼠标控制,键鼠控制三种游戏模式 7.地图驱动 8...
毕业设计用MFC做的一个RPG游戏Demo,基于VC6.0开发,虽然是老古董了,但对于学习MFC的同学还是有一定的学习价值,附带源代码。工程项目体积略大不好上传,需要的可以留言,我再传