Hello Createjs 我的CreateJs之旅

前言在这样H5盛行的年代，我也来蹭蹭热度，首先就是到处找学习资料。在我学习过程中发现好多教程都有介绍一个叫Createjs的东西（一般都是放到教程最后补充讲的），现在我们就来好好研究下Createjs是个什么东东。由于是初次学习，所有难免出现各种不合理的，错误的地方，还请大神指点出来。这也就算是我的一个学习笔记吧，勉强当个教程吧。
先来看看Createjs的简介： CreateJS是基于HTML5开发的一套模块化的库和工具。基于这些库，可以非常快捷地开发出基于HTML5的游戏、动画和交互应用。这里是官网还是中文的。这里有Createjs一整套的源码，可供下载。
一、下载源码 Createjs一共提供了4个小分类 EaselJS TweenJs SoundJS PreloadJS
这里我们先研究第一个，EaselJS，他提供了一套完整的，层次化的显示列表的互动交互方式，来更简单的处理HTML5画布。
1官网下载：
打开官网按步骤一步一步操作
2gitub下载：
github地址

文章图片

其实官网也是从这里下载的
解压下载的文件。在解压的文件中找到lib文件夹，该文件夹中就是我们需要的源码。这里我们使用未压缩的版本easeljs.js。压缩版本easeljs.min.js一般只在项目发布的时候使用。
二、搭建一个简单的Createjs场景搭建一个简单的Createjs场景。
我们的目标是: 在网页上生成一个圆形
效果
首先是网页部分，我们先搭建一个标准的网页开发环境，
1 找一个空白的文件夹，新建文件夹
文件夹js（存放所有的js脚本包括我们需要学的EaselJs源文件）
文件夹CSS（存放css样式表，这里用的并不是太多）。
index.html文件（网页）
整个文件列表如下：

文章图片

2 index.html代码如下:

标题

3 index.js代码如下

//当网页加载完成 window.onload = function() { initGame(); }//声明舞台 var stage; //声明圆形显示对象 var circleShape; //初始化游戏 function initGame() { //创建舞台这里的 "Game"对应的是index.html页面中canvase的id //也就是告诉网页我的舞台就是你的canvas stage = new createjs.Stage("Game"); //Shape类和Flash中的Shape类类似，包含了所有的绘图功能，比如 //drawRect绘制矩形 //drawCircle绘制圆形 //drawRoundRest 绘制圆角矩形 //..... circleShape = new createjs.Shape(); //为圆形图像设置填充颜色 //这里的颜色是一种CSS中设置的颜色,也就是说CSS中怎么设置颜色这就怎么设置 // "#ff000""rgb(255,0,0)""rgba(255,0,0,0.2)""red" //但需要注意的是必须要用引号括起来 circleShape.graphics.beginFill("#00ff00"); //绘制圆形图像在坐标点(0,0) 绘制半径为50的圆 circleShape.graphics.drawCircle(0,0,50); //结束绘制 circleShape.graphics.endFill(); //将绘制好的圆形图像添加到舞台中 stage.addChild(circleShape); //设置圆形图像的坐标点 circleShape.x = 100; circleShape.y = 100; //更新舞台这一步不能少不然舞台不会显示任何东西 stage.update(); }

4 运行效果如下