本文目录一览：
- 1、如何使用Createjs来编写HTML5游戏EaselJS简介
- 2、easeljs的drawrect的高度参数怎么会翻倍？
- 3、HTML5动画框架easeljs中setFPS函数
- 4、createjs.shape.call什么意思
- 5、如何用JS写一个chrome插件来搜索现成的网页内容并替换
如何使用Createjs来编写HTML5游戏EaselJS简介
CreateJS
CreateJS 是一套可以构建丰富交互体验的 HTML5 游戏的开源工具包，旨在降低 HTML5 项目的开发难度和成本，让开发者以熟悉的方式打造更具现代感的网络交互体验。
CreateJS 中包含：
EaselJS：用于 Sprites、动画、向量和位图的绘制，创建 HTML5 Canvas 上的交互体验（包含多点触控），同时提供 Flash 中的“显示列表”功能。
TweenJS：一个简单的用于制作类似 Flash 中“补间动画”的引擎，可生成数字或非数字的连续变化效果。
SoundJS：一个音频播放引擎，能够根据浏览器性能选择音频播放方式。将音频文件作为模块，可随时加载和卸载。
PrloadJS：帮助你简化网站资源预加载工作，无论加载内容是图形、视频、声音、JS、数据……
以上的Createjs介绍来自百度，不过通过介绍可以知道，虽然CreateJS看起来复杂，不过四个部分各有作用，其中最主要的就是EaselJS，其余三项不过是为他服务。
一.如何使用EaselJS
首先到 下载最新版的EaselJS，下载解压后可以在lib文件夹中找到easeljs-0.8.1.min.js,同时在压缩包中可以找到一个examples和tutorials目录，这两个目录中包含一些入门介绍和例子，有英语基础可以看看，DOC文件夹中包含easeljs所有的api。（同理，可以得到createjs包含的其他三项，其目录结构都与EaselJS相似）。
1.得到easeljs-0.8.1.min.js后，新建一个HTML5文件并导入之：
[html] view plain copy
script src=”easeljs-0.8.1.min.js”/script
2.入口函数和创建canvas标签
[html] view plain copy
body onload=”init();”
canvas id=”game” width=”1000″ height=”700″ style=”background-color: white”/canvas
/body
3.编写自己的javascript代码，在函数init()中首先应该使用HTML中的canvas标签来创建一个Stage，createjs中用到的所有元素，都是添加在这个stage当中的，添加后调用stage.update()方法即可使得添加的元素显示在页面上。在创建Stage时，可以直接使用Canvas的id来创建，也可以调用document.getElementById(“game”)，选取canvas来创建，没有区别。
[javascript] view plain copy
script
function init(){
var stage = new createjs.Stage(“game”);
…….
stage.update();
}
/script
二.使用EaselJS创建图形和文字
最简单的游戏都是由文字和图形组成，使用EaselJS添加文字和图形非常的简单。
1.添加文字
[html] view plain copy
var txt = new createjs.Text(“HELLO”,”20px Times”,”#000″);
Createjs中所有的元素都通过调用new createjs.XXXXX来创建，Text包含三个参数分别是显示的字符，字体及大小，最后是颜色。当然在创建完成后可以随意改变txt的x,y坐标和对其，居中以及内容等等的属性。例如：
[html] view plain copy
txt.x = 100;
txt.y = 100;
txt.text = “hello, world!”
完成后记得一定要把新创建的txt添加到stage中才能正常显示
easeljs的drawrect的高度参数怎么会翻倍？
canvas id=”gameview” width=”400″ height=”400″
设置一下canvas的width和height，如果没有设置，则默认是width:300px,height:150px.
此时如果你又用css规定了canvas的宽度和高度的样式，那就会产生这种不想出现的缩放效果。
可以参考：
HTML5动画框架easeljs中setFPS函数
setFPS、getFPS是EaselJS中Ticker类用于设置和获取帧频的函数。
EaselJS中Ticker类动画机制：
1、 逐帧动画
逐帧动画，把动画（例如人物动作）进行分解，然后绘制出连续的、具有代表性的动作，连续播放形成动画，逐帧动画适用于复杂的不连续的动画。
实现逐帧动画主要需要两个东西，动作关键帧和动起来的机制。
“动画”机制： 使动画动起来的机制，这里使用EaselJS的一个类Ticker
createjs.Ticker.addEventListener(“tick”, tick);
function tick(evt) {
//some code
}
Ticker的几个关键方法，setFPS、getFPS设置和获取帧频，setInterval、getInterval设置和获取时间间隔，setPaused、getPaused设置和获取暂停等，这些都是静态方法。
createJS上的逐帧动画示例：
!DOCTYPE html
html lang=”en”
head
meta charset=”UTF-8″
meta author=”pingfan” content=”creatJSGame”
title玩转createJS游戏/title
link rel=”stylesheet” href=”../css/game.css”
/head
body
canvas id=’canvas’ width=”960″ height=”400″浏览器不支持canvas，请使用现代浏览器。/canvas
script src=”/script
script
var stage=new createjs.Stage(“canvas”),
container=new createjs.Container(),
// 定义SpriteSheet 参数
data={
“animations”:{
“run”: [0, 25, “jump”],
//start,end,next,speed开始帧，结束帧，下一个动作，运行速度
“jump”: [26, 63, “run”,1]
},
“images”: [“”],
“frames”:{
//单个帧的高度，宽度，就是png图片里面那么多个帧一个帧的大小
“height”: 292.5,
“width”:165.75,
//相对于原始偏移的位置
“regX”: 0,
“regY”: 0,
//帧数
“count”: 64
}
};
//实例精灵动画集
var move = new createjs.SpriteSheet(data);
//SpriteSheet类设置帧和动画,里面的run为开始的动画
var grant = new createjs.Sprite(move,”run”);
//设置在舞台中的位置
grant.x=360;
grant.y=100;
// 把动画放到舞台上，创建一个间隔事件侦听，进行动画
container.addChild(grant);
stage.addChild(container);
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener(“tick”,stage);
stage.update();
/script
/body
/html
2、补间动画
补间动画，指我们给定动作的初始状态和结束状态，然后动画系统（例如动画软件）自动补齐中间状态，从而形成动画，补间动画适用于物体的移动、状态的改变等简单的动画。
补间动画实例，让刚刚那个原地跑步的人，向前方跑动，单击时表示跳起：
!DOCTYPE html
html lang=”en”
head
meta charset=”UTF-8″
meta author=”pingfan” content=”creatJSGame”
title玩转createJS游戏/title
link rel=”stylesheet” href=”../css/game.css”
/head
body
canvas id=’canvas’ width=”960″ height=”400″浏览器不支持canvas，请使用现代浏览器。/canvas
button id=’btn’暂停pause/button
script src=”/script
script
var stage=new createjs.Stage(“canvas”),
container=new createjs.Container(),
// 定义SpriteSheet 参数
data={
“animations”:{
“run”: [0, 25, “run”,1.5],
//start,end,next,speed开始帧，结束帧，下一个动作，运行速度
“jump”: [26, 63, “run”,1.5]
},
“images”: [“../img/runningGrant.png”],
“frames”:{
//单个帧的高度，宽度，就是png图片里面那么多个帧一个帧的大小
“height”: 292.5,
“width”:165.75,
//相对于原始偏移的位置
“regX”: 0,
“regY”: 0,
//帧数
“count”: 64
}
};
//实例精灵动画集
var move = new createjs.SpriteSheet(data);
//SpriteSheet类设置帧和动画,里面的run为开始的动画
var grant = new createjs.Sprite(move,”run”);
//设置在舞台中的位置
grant.x=20;
grant.y=22;
// 把动画放到舞台上，创建一个间隔事件侦听，进行动画
container.addChild(grant);
stage.addChild(container);
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener(“tick”,tick);
//speed用来做加速度
var speed=1;
function tick(){
if(!createjs.Ticker.getPaused()){
grant.x+=3*speed;
stage.update();
speed+=.01;
(grant.xstage.canvas.width) (grant.x=0,speed=1)
}
}
//侦听鼠标事件
stage.addEventListener(“stagemousedown”,handleClick);
function handleClick(){
//alert(11);
grant.gotoAndPlay(“jump”);
}
//设置按钮暂停
var btn=document.getElementById(“btn”);
btn.addEventListener(“click”,toggleMove,false);
function toggleMove(){
// grant.gotoAndStop();
//其实实现暂停和运动就是false和true切换
var paused = !createjs.Ticker.getPaused();
createjs.Ticker.setPaused(paused);
btn.value=”暂停pause” ? “运动play” : “暂停pause”;
}
stage.update();
/script
/body
/html
createjs.shape.call什么意思
call方法的第一个参数定义了this关键字在被调用方法的执行上下文中指向和对象。
每个JavaScript的代码执行上下文都提供了this关键字
而this理论上是你当前所操作的js对象。
function Shape() { this.x = 0; this.y = 0; }
function Circle() { this.radius = 0;
Shape.call(this); }
最后一行代码Shape.call(this)调用了Shape构造函数并改变了当Circle构造函数被调用时指向this的this值。
啥意思？
var c = new Circle();
新建一个对象。这行代码调用了Circle构造函数，它首先在c上绑定了一个变量radius。此时的this指向的是c。
我们接着调用Shape构造函数，然后将Shape中的this值指向当前在Circle中的this值，也就是c。Shape构造函数将x和y绑定到了当前的this上，也就是说，c现在拥有值为0的x和y属性。
如何用JS写一个chrome插件来搜索现成的网页内容并替换
input type=”button” onclick=”createjs()”/
function createjs()
{
var fso,f1
fso=new ActiveXObject(“Scripting.FileSystemObject”);
f1=fso.CreateTextFile(“e:\\js.js”,true); //路径自行定义，也可以能过参数
f1.WriteLine(“js代码”);
f1.WriteBlankLines(1);
f1.Close();
}
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/198814.html
微信扫一扫 
支付宝扫一扫 