& &现在html5小游戏越来越火爆了，由于公司业务的需要，也开发过几款微信小游戏，用canvas写的没有利用什么框架，发现性能一直不怎么好，所以楼主就只能硬着头皮去学习比较火的Adobe公司出的CreateJS框架，找了很久资料比较少，基本没什么中文文档，很多都是英文文档（想想我这才过四级，只能借用有道，一点一点看，一点一点翻译学习），今天我就写个引子（也是在慢慢学习），写的不好，大家就不要见笑。& & & & EaselJS是CreateJS Suite中的一个js库，它可以让canvas的使用变得简单，它提供了一个直接了当的创建html5 canvas中使用富媒体、富交互应用的解决方案。& & & &&(一)如何使用& & & & 先去，然后创建一个舞台canvas元素的舞台stage对象stage=new createjs.Stage('demo')，增加显示的子对象到舞台上英文就是DisplayObject对象stage.addChild()，然后渲染render就用stage.update()就可以了。EaselJS 支持功能常用的createjs下相对应的对象:& & & &&& & & & 1.使用图像就用Bitmap位图对象。& & & &&& & & & 2.矢量图形就使用Shape和Graphics对象。& & & & 3.动画Animated 位图bitmaps 使用 SpriteSheet 和 Sprite 对象。& & & & 4.使用文本实例就用Text。& & & & 5.包含说有DisplayObjects对象的容器就用Container。& & & & 6.控制HTML DOM 元素的使用DOMElement。& & & & 所有显示对象可以添加到舞台stage作为child,或直接吸引到画布canvas。& & & & 使用说明：& & & & 所有的在舞台上的显示对象DisplayObject（除了DOMElement），当使用mouse或touch时可以绑定事件。EaselJS支持 hover、 press和 release events，同时很容易使用drag和drop拖拽的模型。
& & & &&让我们看看基本的例子吧：& & & &&& & & & 你可以现在 illustrates里面先去实现模拟，然后去用EaselJS创建Stage和shape去实现效果。
//Create a stage by getting a reference to the canvas
//创建一个阶段通过引用到画布上
stage = new createjs.Stage("demoCanvas");
//Create a Shape DisplayObject.
//创建形状显示对象
circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 40);
//Set position of Shape instance.
//设置形状实例的圆心坐标
circle.x = circle.y = 50;
//Add Shape instance to stage display list.
//增加形状实例显示在舞台列表上
stage.addChild(circle);
//Update stage will render next frame
//更新舞台渲染
stage.update();
& &&基本的监听绑定事件，简单交互
displayObject.addEventListener("click", handleClick);
function handleClick(event){
// Click happenened
displayObject.addEventListener("mousedown", handlePress);
function handlePress(event) {
// A mouse press happened.
// Listen for mouse move while the mouse is down:
event.addEventListener("mousemove", handleMove);
function handleMove(event) {
// Check out the DragAndDrop example in GitHub for more
结合上面创建的cricle显示对象即：
//监听圆形显示对象，增加事件
displayObject.addEventListener("click", handleClick);
circle.addEventListener("click", handleClick);
function handleClick(event){
// 点击时发生
alert(11);
circle.addEventListener("mousedown", handlePress);
function handlePress(event) {
alert('鼠标按下了')
// 鼠标按下时发生
// 监听当鼠标按下移动时发生的事件
event.addEventListener("mousemove", handleMove);
function handleMove(event) {
// Check out the DragAndDrop example in GitHub for more
console.log('鼠标移动了')
&& &&基本的动画例子& & & & & & & &&
//Update stage will render next frame
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick() {
//Circle will move 10 units to the right.
//圆将向右边以10为单位移动
circle.x += 10;
//Will cause the circle to wrap back
//移动的距离大于舞台的距离，将重新开始
if (circle.x & stage.canvas.width) { circle.x = 0; }
stage.update();
最后，EaselJS 也还有其他的功能，也简单的说一下吧：& & & & 1.canvas阴影和CompositeOperation等特性& & & & 2.Ticker, a global heartbeat that objects can subscribe to（有点不太懂）& & & &&& & & & 3.滤镜，就是像ps里面的一下滤镜遮罩，颜色通道这些。& & & &&& & & & 4.按钮button的功能，可以很简单的创建按钮交互。& & & &&& & & & 5.SpriteSheetUtils 和 SpriteSheetBuilder帮助我们构建和管理SpriteSheet 在运行的时候。createJS的学习是系列教程，喜欢就请继续关注下期&&一起成长
阅读(...) 评论()如何使用Createjs来编写HTML5游戏（一）EaselJS简介
如何使用Createjs来编写HTML5游戏（一）EaselJS简介

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文件并导入之：
&script src=&easeljs-0.8.1.min.js&&&/script&
&2.入口函数和创建canvas标签
&body onload=&init();&&
&canvas id=&game& width=&1000& height=&700& style=&background-color: white&&&/canvas&
3.编写自己的javascript代码，在函数init()中首先应该使用HTML中的canvas标签来创建一个Stage，createjs中用到的所有元素，都是添加在这个stage当中的，添加后调用stage.update()方法即可使得添加的元素显示在页面上。在创建Stage时，可以直接使用Canvas的id来创建，也可以调用document.getElementById(&game&)，选取canvas来创建，没有区别。
function init(){
var stage = new createjs.Stage(&game&);
stage.update();
二.使用EaselJS创建图形和文字
最简单的游戏都是由文字和图形组成，使用EaselJS添加文字和图形非常的简单。
1.添加文字
var txt = new createjs.Text(&HELLO&,&20px Times&,&#000&);
Createjs中所有的元素都通过调用new createjs.XXXXX来创建，Text包含三个参数分别是显示的字符，字体及大小，最后是颜色。当然在创建完成后可以随意改变txt的x,y坐标和对其，居中以及内容等等的属性。例如：
txt.x = 100;
txt.y = 100;
txt.text = &hello, world!&
完成后记得一定要把新创建的txt添加到stage中才能正常显示
stage.addChild(txt);
2.添加图形
常用图形包含两个部分，png或jpg的图片和代码绘制的矢量图。先从矢量图开始，在preload中会有图片的加载绘制方法。
同添加Text类似，直接调用new createjs.Xxxx来创建这里是Shape()。
var shape = new createjs.Shape();
stage.addChild(shape);
直接添加后发现并不能显示任何图形，因为在EaselJS中想要显示一个图形，除了需要先创建一个Shape意外，还需要再创建一个Graphics，可以理解成一个有绘制能力的画笔，而Shape则是一个画布。
首先创建一个Graphics，类似的调用new createjs.Graphics();
var g = new createjs.Graphics();
g.setStrokeStyle(1);
g.beginStroke(&#000000&);
g.beginFill(&red&);
g.drawCircle(0,0,30);
使用new createjs.Graphics();创建g变量后，即可调用Graphics内置的方法来绘制图形，例如beginStrokeStyle(&#000&)是设置边框颜色，beginFill(&red&)是设置填充的颜色，最后drawCircle(0,0,30)是在（0，0）位置绘制一个半径30的圆，drawRect(0,0,100,150);是在（0，0）位置绘制一个100*150的方形，同时所有的方法可以一起调用，例如：
var graphics = new createjs.Graphics().beginStroke(&#000&).beginFill(&#ff0000&).drawRect(0, 0, 100, 100);
这样就获得了一个用来渲染Shape的画笔graphics，使用之即可获得一个黑色边框的红色正方形：
var graphics = new createjs.Graphics().beginStroke(&#000&).beginFill(&#ff0000&).drawRect(0, 0, 100, 100);
var shape = new createjs.Shape(graphics);
stage.addChild(shape);
如果觉得先创建Graphics后创建Shape太复杂，也可以调用Shape的graphics属性直接画出图形。
var shape = new createjs.Shape();
shape.graphics.beginStroke(&#000&).beginFill(&#ff0000&).drawRect(0, 0, 100, 100);
同前段代码的作用一样，都可以获得一个黑边的红色正方形。
Shape也包含很多可以修改的属性，如坐标x/y,透明度等，rotation是设置旋转角度，scaleX和scaleY是设置图形放大或者缩小的比例。可以查询api手册，其中有个regX和regY，左偏移和又偏移，这两个可以理解为设置图形Shape的中点，默认值都是0，即为图形左上角，所以当你设置显示的x/y坐标为0，0时，图形Shape自左上角开始，在（0，0）位置显示图形，如果设置regX和regY为50
shape.regX = 50;
shape.regY = 50;
则图形的中心改为（50，50），显示的位置仍然是坐标（0，0），则此时只显示1/4的方形，整个图形，向左且向上移动了50px。
还有一个常用的属性是shadow，通过给图形设置shadow属性可在图形下添加一个阴影使得图形显得有立体感。
shape.shadow = new createjs.Shadow(&#000&,5,5,8);
三.容器Container
Container是一个容器，可以包含Text、Bitmap、Shape、Sprite等其他的EaselJS元素，包含在一个Container中方便统一管理，比如你要做一个按钮，按钮图形和上面的提示文字包含在一个Container中，可以统一移动。
var button = new createjs.Container();
var label = new createjs.Text(&OK&,&20px Times&,&#000&);
label.textAlign = 'center';
label.textBaseline = 'middle';
var shape = new createjs.Shape();
shape.graphics.beginFill(&#ff0000&).drawCircle(0, 0, 50);
shape.shadow =
new createjs.Shadow(&#000&,5,5,8);
button.addChild(shape,label);
button.regX = shape.width/2;
button.regY = shape.height/2;
button.x = 100;
button.y = 100;
button.cursor = &pointer&;
label.x = button.regX;
label.y = 50;
stage.addChild(button);
这样就能得到一个圆形的红色按钮，设置button的cursor属性可以是鼠标放在按钮上是显示一个白色的手，提示点击，要想使用这个必须先添加
stage.enableMouseOver();
这样就能得到一个按钮，只需要给它添加事件监听即可正常使用。（常用的方式是继承一个Container来创建一个按钮，后面会见到）
四.添加事件监听和Ticker
想要与stage中的所有元素交互只需要给他们添加addEventListener，例如点击，鼠标划过等等，而对于stage本身，有个特别的事件&tick&，给stage设置tick相当于javascript中的SetInterval，定时的运行一个函数，可以用来定时的刷新stage,即运行stage.update()。一个比较常用的方法也是一个最简单的游戏框架一般都是这样。
function init(){
stage = new createjs.Stage('game');
stage.enableMouseOver();
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener('tick',update);
function update(event){
stage.update();
当然可以直接使用
createjs.Ticker.addEventListener('tick',stage);来直接给stage添加一个tick相应，由setFPS来设定刷新的频率，如果这样只会调用stage.update()方法来刷新stage，为了防止有其他的元素需要更新，一般都是调用一个方法，这里是一个新的update方法。
除去stage的tick事件外，还可以给元素添加很多事件监听，比如click点击，mouseover划过，mouseout鼠标移出等等，在API中可以找到每个元素能够相应的所有事件Event,例如给一个shape添加点击：
var shape = new createjs.Shape();
shape.graphics.beginFill(&#ff0000&).drawCircle(100, 100, 50);
shape.addEventListener(&click&,function(e){
alert(&ok&);
这里先创建了一个shape,然后给它添加点击事件，弹出一个警告框。
还可以添加鼠标滑过等，（这里使用on方法添加，on方法是addEventListener的一个简单的形式，很多的createjs方法都有简写的形式，尤其在graphics中）
function init(){
stage = new createjs.Stage('game');
stage.enableMouseOver();
var shape = new createjs.Shape();
shape.graphics.beginFill(&#ff0000&).drawCircle(100, 100, 50);
shape.addEventListener(&click&,function(e){
alert(&ok&);
shape.on(&mouseover&,function(e){
shape.scaleX = 1.2;
shape.scaleY = 1.2;
shape.alpha = 0.8;
shape.on(&mouseout&,function(e){
shape.scaleX = 1;
shape.scaleY = 1;
shape.alpha = 1;
stage.addChild(shape);
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener('tick',update);
function update(e){
stage.update();
五.一个简单的画板工具

通过Text，Shape，Container，addEventListener这些基本的内容，完全可以实现一些简单的工具和小游戏，比如俄罗斯放块，托球。在createjs的官方demo中就有一个画板工具，代码如下：
var canvas,
var drawingC
var oldPt;
var oldMidPt;
function init() {
canvas = document.getElementById(&myCanvas&);
index = 0;
colors = [&#828b20&, &#b0ac31&, &#cbc53d&, &#fad779&, &#f9e4ad&, &#faf2db&, &#563512&, &#9b4a0b&, &#d36600&, &#fe8a00&, &#f9a71f&];
//check to see if we are running in a browser with touch support
stage = new createjs.Stage(canvas);
stage.autoClear =
stage.enableDOMEvents(true);
createjs.Touch.enable(stage);
createjs.Ticker.setFPS(24);
drawingCanvas = new createjs.Shape();
stage.addEventListener(&stagemousedown&, handleMouseDown);
stage.addEventListener(&stagemouseup&, handleMouseUp);
title = new createjs.Text(&Click and Drag to draw&, &36px Arial&, &#777777&);
title.x = 300;
title.y = 200;
stage.addChild(title);
stage.addChild(drawingCanvas);
stage.update();
function handleMouseDown(event) {
if (!event.primary) { }
if (stage.contains(title)) {
stage.clear();
stage.removeChild(title);
color = colors[(index++) % colors.length];
stroke = Math.random() * 30 + 10 | 0;
oldPt = new createjs.Point(stage.mouseX, stage.mouseY);
oldMidPt = oldPt.clone();
stage.addEventListener(&stagemousemove&, handleMouseMove);
function handleMouseMove(event) {
if (!event.primary) { }
var midPt = new createjs.Point(oldPt.x + stage.mouseX && 1, oldPt.y + stage.mouseY && 1);
drawingCanvas.graphics.clear().setStrokeStyle(stroke, 'round', 'round').beginStroke(color).moveTo(midPt.x, midPt.y).curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);
oldPt.x = stage.mouseX;
oldPt.y = stage.mouseY;
oldMidPt.x = midPt.x;
oldMidPt.y = midPt.y;
stage.update();
function handleMouseUp(event) {
if (!event.primary) { }
stage.removeEventListener(&stagemousemove&, handleMouseMove);
还有些简单的小游戏都可以自己实现，比如：

感谢关注 Ithao123HTML5频道，是专门为互联网人打造的学习交流平台，全面满足互联网人工作与学习需求，更多互联网资讯尽在 IThao123!
Laravel是一套简洁、优雅的PHP Web开发框架(PHP Web Framework)。它可以让你从面条一样杂乱的代码中解脱出来；它可以帮你构建一个完美的网络APP，而且每行代码都可以简洁、富于表达力。
随着国内互联网的发展，产品经理岗位需求大幅增加，在国内，从事产品工作的大部分岗位为产品经理，其实现实中，很多从事产品工作的岗位是不能称为产品经理，主要原因是对产品经理的职责不明确，那产品经理的职责有哪些，本专题将详细介绍产品经理的主要职责
Swift是Apple在WWDC2014所发布的一门编程语言，用来撰写OS X和iOS应用程序[1]。在设计Swift时．就有意和Objective-C共存，Objective-C是Apple操作系统在导入Swift前使用的编程语言
Swift是供iOS和OS X应用编程的新编程语言，基于C和Objective-C，而却没有C的一些兼容约束。Swift采用了安全的编程模式和添加现代的功能来使得编程更加简单、灵活和有趣。界面则基于广受人民群众爱戴的Cocoa和Cocoa Touch框架，展示了软件开发的新方向。
PHP（外文名:PHP: Hypertext Preprocessor，中文名：“超文本预处理器”）是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点，利于学习，使用广泛，主要适用于Web开发领域。PHP 独特的语法混合了C、Java、Perl以及PHP自创的语法。它可以比CGI或者Perl更快速地执行动态网页。用PHP做出的动态页面与其他的编程语言相比，PHP是将程序嵌入到HTML（标准通用标记语言下的一个应用）文档中去执行，执行效率比完全生成HTML标记的CGI要高许多；PHP还可以执行编译后代码，编译可以达到加密和优化代码运行，使代码运行更快。
IThao123周刊您目前使用的浏览器该进博物馆啦~~~
为了更佳的浏览体验，请使用现代浏览器访问本站
Outdated Browser
您的浏览器已禁用 Javascript，启用它获得更好的体验。
Outdated Browser
这是为桌面用户准备的工具，但您可以安心在这里浏览
46.5% 的互联网用户在使用 此款浏览器
GOOGLE CHROME
支持如下操作系统
16.5% 的互联网用户在使用 此款浏览器
MOZILLA FIREFOX
支持如下操作系统
21.6% 的互联网用户在使用 此款浏览器
INTERNET EXPLORER
支持如下操作系统
10.3% 的互联网用户在使用 此款浏览器
APPLE SAFARI
支持如下操作系统
1.5% 的互联网用户在使用 此款浏览器
支持如下操作系统
冷静 这是为桌面用户提供的不是为手机用户提供的}