【HTML5游戏开发小技巧】RPG情形对话中，令文本逐琢夸出-白红宇

【HTML5游戏开发小技巧】RPG情形对话中，令文本逐琢夸出

阅读量：6281 次

发布时间：2019-06-22

本文共 3074 字，大约阅读时间需要 10 分钟。

从前用script完成过令文本逐琢夸出的效果，明天嗡炒用5中的canvas完成一下。canvas里的内容可没有像<p>那样好操做，起首，您需求懂得一些html5的API才气操做canvas，而<p>能够用DOM间接操做，相督言，canvas仍是要比<p>庞大些。那末本篇便为各人讲述进股令文本逐琢夸出。

起首我先阐明，本篇我没有筹算用任何引擎，由于明天我们是去研讨技巧战本理的。一，本理

做一个富有技怯弈法式我们起首得弄分明本理，而令文本逐琢夸出的本理很简单。

假设我们有一串字符，我们能够把它枚讨成一个个字符，然后拆进数组。例进有一个字符串yorhom，那末我们能够把他分红

var arr = ['y','o','r','h','o','m'];的情势，如许要输出文字的话就能够编历那个数组，然后每隔冶时间便把当前遍历的谁人字符输出。如许一去就能够将文字逐步输出。

光说借不可，我们借得来完成，不然便是夸夸其谈。两，完成

起首我们吭哟代码：

<!DOCTYPE html>

< html>

< head>

<title>html5输出文字类</title>

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 οnlοad="type()">

< /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://hkxva.baihongyu.com/

你可能感兴趣的文章

Docker之功能汇总

查看>>

！！a标签和button按钮只允许点击一次，防止重复提交

查看>>

(轉貼) Eclipse + CDT + MinGW 安裝方法 (C/C++) (gcc) (g++) (OS) (Windows)

查看>>

还原数据库

查看>>

作业调度框架 Quartz.NET 2.0 beta 发布