以前用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.jiushun8.com
  就这样，逐字输出就搞定了。
  看看效果吧：
  http://www.shengshiyouxi.com
三，源码下载
  源码在这里：http://files.cnblogs.com/ducle/html5-%E8%BE%93%E5%87%BA%E6%96%87%E5%AD%97.rar

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

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

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

    从前用JAVAscript完成过令文本逐琢夸出的效果,明天嗡炒用html5中的canvas完成一下.canvas里的内容可没有像<p>那样好操做,起首,您需求懂得一些html5的API才气 ...

  2. iOS开发小技巧--即时通讯项目:使用富文本在UILabel中显示图片和文字;使用富文本占位显示图片

    Label借助富文本显示图片 1.即时通讯项目中语音消息UI的实现,样式如图: 借助富文本在UILabel中显示图片和文字 // 1.创建一个可变的富文本 NSMutableAttributedStr ...

  3. Swift开发小技巧--识别选中照片中的二维码

    识别选中照片中的二维码 点击相册按钮,打开用户相册 @IBAction func photoBtnClick(sender: AnyObject) { // 打开相册 // 1.判断是否能够打开相册 ...

  4. iOS开发小技巧--TableView Group样式中控制每个section之间的距离

    一.TableView的Group样式中,默认的每个section都有sectionHeader和sectionFooter,只要调整这两个的大小就可以实现section之前的间距扩大或缩小 二.项目 ...

  5. iOS开发小技巧--巧用ImageView中的mode(解决图片被拉伸的情况)

    一.自己遇到的问题:在布局ImageView的时候,通过约束将ImageView布局好,但是里面的图片被拉伸的很难看.这时候就用到了Mode属性,如图: 代码实现方式: 二.让图片按照比例拉伸,并不是 ...

  6. iOS开发小技巧--父子控制器练习中get到的技能，控制核心动画的范围

    一.未经过处理的动画是这样的,自定义的导航按钮也一起跟着转起来了. 二.自己想要的效果 三.实现这种效果的思想:核心动画要添加到view的layer上面,刚开始的情况是讲核心动画添加到了整个大view ...

  7. Html5游戏开发-145行代码完成一个RPG小Demo

    lufy前辈写过<[代码艺术]17行代码的贪吃蛇小游戏>一文,忽悠了不少求知的兄弟进去阅读,阅读量当然是相当的大.今天我不仿也搞一个这样的教程,目地不在于忽悠人,而在于帮助他人. 先看de ...

  8. HTML5游戏开发,剪刀石头布小游戏案例

    剪刀石头布,非常可爱的小游戏,相信大家都非常的怀念这款小游戏,小时候也玩过很多次,陪伴着我的童年的成长,现在是不是还会玩一下,剪刀石头布游戏的规则我们都知道是:剪刀剪布,石头砸剪刀,布包石头.跟朋友. ...

  9. html5游戏开发-零基础开发《圣诞老人送礼物》小游戏

    开言: 以前lufy前辈写过叫“ HTML5游戏开发-零基础开发RPG游戏”的系列文章,在那里面我学习了他的引擎以及了解了游戏脚本.自从看了那几篇文章,我便对游戏开发有了基本的认识.今天我也以零基础为 ...

随机推荐

  1. gets scanf以及缓冲区域的问题

    1:scanf scanf会忽略开头所有的空格,并以Space Enter Tab 结束输入, 不会舍弃最后的回车符(即回车符会残存在缓冲区域中) 2:getchar getchar以Enter结束, ...

  2. linux shell: 搜索字符串,剔除包含特定字符的行

    搜索代码中出现CONFIG_BOOTARGS的行,但又不希望有#define和#undef, 暂时不知带如何直接用一个语句做到,因此用了如下三个语句. find . -type f | xargs g ...

  3. Value Categories

    Value categories Three primary categories primary categories mixed special Each C++ expression (an o ...

  4. 菜鸟初识UML

    首当其冲的就是:什么是UML呢? 首先,UML 是一种可视化的面向对象的建模语言.它是一个支持模型化和软件系统开发的图形化语言,为软件开发的所有阶段提供模型化和可视化支持,包括由需求分析到规格,到构造 ...

  5. [LeetCode]题解（python）：058-Length of Last Word

    题目来源: https://leetcode.com/problems/length-of-last-word/ 题意分析: 给出只包括大小写和空格的字符,输出最后一个单词的长度. 题目思路: 从最后 ...

  6. C陷阱与缺陷(二)

    第二章 语法陷阱 2.1 理解函数声明 (*(void(*)())0)();任何C变量的声明都由两部分组成:类型以及一组类似表达式的声明符.一旦我们知道了如何声明一个给定类型的变量,那么该类型的类型转 ...

  7. Apache中RewriteCond规则参数介绍(转)

    CodeIgniter2.0已经出来有20多天了呢~也就是我一直用的php框架(CI).一直都在研究jquery,倒是把CI给忘到一边去了,呵呵~~今天公司事情不是很多,于是开始熟悉一下CI2.0的一 ...

  8. 转:requirejs2.0新特性介绍

    就在前天晚上RequireJS发布了一个大版本,直接从version1.0.8升级到了2.0.随后的几小时James Burke又迅速的将版本调整为2.0.1,当然其配套的打包压缩工具r.js也同时升 ...

  9. border-radius.htc为ie6-8实现圆角

    ~~圆角是比较常用的css3属性,但是ie6-8并不支持圆角,可用border-radius.htc  html组件实现圆角, border-radius.htc内部应用vml进行了重绘 border ...

  10. StringIO模块字符串的缓存

    StringIO经常被用来作为字符串的缓存,应为StringIO有个好处,他的有些接口和文件操作是一致的,也就是说用同样的代码,可以同时当成文件操作或者StringIO操作.比如: import st ...