【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正在某个时辰输出文字。
更多请查看：http://www.shengshiyouxi.com
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
便如许，逐琢夸出便弄定了。
【HTML5游戏开发小技巧】RPG情形对话中，令文本逐琢夸出的更多相关文章
- 【HTML5游戏开发小技巧】RPG情景对话中，令文本逐字输出
以前用JAVAscript实现过令文本逐字输出的效果,今天我来用html5中的canvas实现一下.canvas里的内容可不像<p>那样好操作,首先,你需要懂得一些html5的API才能操 ...
- iOS开发小技巧--即时通讯项目:使用富文本在UILabel中显示图片和文字;使用富文本占位显示图片
Label借助富文本显示图片 1.即时通讯项目中语音消息UI的实现,样式如图: 借助富文本在UILabel中显示图片和文字 // 1.创建一个可变的富文本 NSMutableAttributedStr ...
- Swift开发小技巧--识别选中照片中的二维码
识别选中照片中的二维码 点击相册按钮,打开用户相册 @IBAction func photoBtnClick(sender: AnyObject) { // 打开相册 // 1.判断是否能够打开相册 ...
- iOS开发小技巧--TableView Group样式中控制每个section之间的距离
一.TableView的Group样式中,默认的每个section都有sectionHeader和sectionFooter,只要调整这两个的大小就可以实现section之前的间距扩大或缩小 二.项目 ...
- iOS开发小技巧--巧用ImageView中的mode(解决图片被拉伸的情况)
一.自己遇到的问题:在布局ImageView的时候,通过约束将ImageView布局好,但是里面的图片被拉伸的很难看.这时候就用到了Mode属性,如图: 代码实现方式: 二.让图片按照比例拉伸,并不是 ...
- iOS开发小技巧--父子控制器练习中get到的技能，控制核心动画的范围
一.未经过处理的动画是这样的,自定义的导航按钮也一起跟着转起来了. 二.自己想要的效果 三.实现这种效果的思想:核心动画要添加到view的layer上面,刚开始的情况是讲核心动画添加到了整个大view ...
- Html5游戏开发-145行代码完成一个RPG小Demo
lufy前辈写过<[代码艺术]17行代码的贪吃蛇小游戏>一文,忽悠了不少求知的兄弟进去阅读,阅读量当然是相当的大.今天我不仿也搞一个这样的教程,目地不在于忽悠人,而在于帮助他人. 先看de ...
- HTML5游戏开发,剪刀石头布小游戏案例
剪刀石头布,非常可爱的小游戏,相信大家都非常的怀念这款小游戏,小时候也玩过很多次,陪伴着我的童年的成长,现在是不是还会玩一下,剪刀石头布游戏的规则我们都知道是:剪刀剪布,石头砸剪刀,布包石头.跟朋友. ...
- html5游戏开发-零基础开发《圣诞老人送礼物》小游戏
开言: 以前lufy前辈写过叫“ HTML5游戏开发-零基础开发RPG游戏”的系列文章,在那里面我学习了他的引擎以及了解了游戏脚本.自从看了那几篇文章,我便对游戏开发有了基本的认识.今天我也以零基础为 ...
随机推荐
- 积累的VC编程小技巧之标题栏和菜单
1.窗口最大最小化按纽的控制 ①怎样在程序开始的时候让它最大化? ②vc++做出来的exe文件在窗体的右上方是没有最大化和最小化按钮的,怎样实现这一功能? ③如何在显示窗口时,使最大化按钮变灰? ...
- Handler和HandlerThread
1.什么是Handler? SDK中关于Handler的说明例如以下: A Handler allows you to sendand process Messageand Runnable obje ...
- ExtJs4 笔记（8） Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件
本篇要登场的有三个控件,分别是滚轴控件.进度条控件和编辑控件. 一.滚轴控件 Ext.slider 1.滚轴控件的定义 下面我们定义三个具有代表意义滚轴控件,分别展示滚轴横向.纵向,以及单值.多值选择 ...
- WCF 项目应用连载[8] - 绑定、服务、行为 大数据传输与限流 - 下 (ServiceThrottlingAttribute)
因为ORM的原因,对Attribute编程有一种情节..所以这节的出现,完全是因为在WCF对自定义Attribute的一种应用. WCF 项目应用连载[7] - 绑定.服务.行为 大数据传输与限流 - ...
- 欧拉计划·第四题
题目4:找出由两个三位数乘积构成的回文. 一个回文数指的是从左向右和从右向左读都一样的数字.最大的由两个两位数乘积构成的回文数是9009 = 91 * 99. 找出最大的有由个三位数乘积构成的回文数. ...
- OCP读书笔记(4) - 配置备份设置
4.Configuring Backup Settings 查看RMAN持久化设置 [oracle@easthome ~]$ rman target / RMAN> show all; SQL& ...
- nRF Toolbox 1.2 使用AKII的实现，而Becon始终不好使
这几天调试使用nRF51822驱动mpu6050及其数据传输到android中,调试的过程遇到一些困难,apptimer不太会用,然后就參考了下ble_app_hrs的程序,结果成功搞定,demo的价 ...
- jQuery选择器实现隔行变色和使用javaScript实现隔行变色
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--什么是选择器? jQuery选择器继承了 ...
- LeetCode总结 -- 树的性质篇
树的性质推断是树的数据结构比較主要的操作,一般考到都属于非常easy的题目,也就是第一道入门题.面试中最好不能有问题,力求一遍写对.不要给面试官不论什么挑刺机会.LeetCode中关于树的性质有下面题 ...
- 使用MYCAT作为Mysql HA的中间件（转）
记得在上一篇文章“Java集群--大型网站是怎样解决多用户高并发访问的”的结尾处本人阐述了数据库的高可用的一种方案----实现主从部署,那么今天,就让我聊聊本人关于数据库的一些所思所想吧! 下面是本人 ...