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

以前用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://files.cnblogs.com/ducle/html5-%E8%BE%93%E5%87%BA%E6%96%87%E5%AD%97.rar

贴几张demo图,不想看代码只想看效果的朋友可以看看:

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

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

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

今天是清明节,但由于这个节日太xx了,所以我就不祝大家清明节快乐了。

 

----------------------------------------------------------------

欢迎大家转载我的文章。

转载请注明:转自Yorhom's Game Box

欢迎继续关注我的博客

 

你可能感兴趣的:(html5)