前言

在这样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代码如下:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>标题</title>
<!--        引用外部EaselJS库--><script type="text/javascript" src="js/easeljs.js"></script>
<!--        添加自己的JavaScript代码--><script type="text/javascript" src="js/index.js"></script></head><body><div>
<!--            添加canvas标签 careateJs所有操作将在此标签下进行，这和原生的HTML一样--><canvas id="Game" width="550" height="400"></canvas></div></body>
</html>

3 index.js代码如下

//当网页加载完成
window.onload = function()
{initGame();
}//声明舞台
var stage;
//声明圆形显示对象
var circleShape;//初始化游戏
function initGame()
{//创建舞台 这里的 "Game"  对应的是index.html页面中canvase的id//也就是告诉网页我的舞台就是你的canvasstage = 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 运行效果如下

三、梳理一下

1 创建舞台

//"Game" 对应网页中canvas的id
var stage = new createjs.Stage("Game");

2 绘图类Shape 绘制各类矢量图形 (后面具体再讲)

3 beginFill填充颜色

这里的颜色设置和CSS中的颜色设置一样

英文单词 “red” “green” 等等
十六进制 “#ff0000”
rgb “rgb(255,0,0)”
参数1 红色 0~255
参数2 绿色 0~255
参数3 蓝色 0~255
rgba “rgba(255,0,0,0.4)”
参数1 红色 0~255
参数2 绿色 0~255
参数3 蓝色 0~255
参数4 透明度 0~1

4将显示对象添加到舞台

stage.addChild(circleShape)

至于显示对象是什么后面再讲现在只要知道我们创建的圆形图像就是一个显示对象

5刷新舞台

stage.update();

这句话一定要写不然舞台不会显示任何东西

Hello Createjs相关推荐

Html5游戏框架createJS组件--EaselJS
CreateJS库是一款HTML5游戏开发的引擎,是一套可以构建丰富交互体验的HTML5游戏的开源工具包,旨在降低HTML5项目的开发难度和成本,让开发者以熟悉的方式打造更具现代感的网络交互体验. 掌 ...
createjs开发h5游戏: 指尖大冒险
之前看到一个指尖冒险游戏,觉得挺有意思,就想学习一下怎么实现,毕竟当产经提出类似的需求时,问我等开发可不可以实现的时候,不至于回答不知道. 本文的主要思路,参考的是凹凸实验室的这篇文章:H5游戏开发: ...
CreateJs入门必知必会
CreateJS介绍 CreateJS是基于HTML5开发的一套模块化的库和工具. 基于这些库,可以非常快捷地开发出基于HTML5的游戏.动画和交互应用. CreateJS主要包含如下四个类库: Ea ...
createjs中shape的属性regX和regY
官方文档说regX和regY是图形与注册点的距离. 那么注册点是什么呢? 我理解注册点就是图形的x/y对应的点图形动效的原点就是注册点如果修改图形的regX和regY值图形在画布上的位置是会被改变 ...
canvas 动画库 CreateJs 之 EaselJS（上篇）
本文来自网易云社区作者:田亚楠须知本文主要是根据 createjs 中的 EaselJS 在 github 上的 tutorials 目录下的文章整理而来 (原文链接),同时也包含了很多本人的理 ...
CreateJS基础学习笔记(上)
1.CreateJS介绍了解CreateJS 1.CreateJS: 一款HTML5游戏开发的引擎 CreateJS是一套可以构建丰富交互体验的HTML5游戏的开源工具包,旨在降低H ...
createjs入门
createjs是一个轻量级的框架,稍微有点时间和耐心,就可以把全部源代码都看一遍,毕竟只有三十几个js文件.地址:http://www.createjs.com/ 开发createjs的动画或游戏, ...
CreateJS 学习4 动画、TweenJS
水平移动动画示例 <html><head><script src="easeljs.min.js" charset="utf-8" ...
CreateJS实现打飞机小游戏
之前对createJs体验了一下,正好看到网上有一篇教程,试着也写了一个打飞机的小游戏,UI相对比较简单,主要记录下实现游戏逻辑的思路. window.onload = function() {can ...
CreateJS 制作 H5 长图动画
对于 H5 动画,相信大家都不陌生,现在很多大公司的手机宣传页面以及公众号推文中,都能够看到各式各样的 H5 动画效果. 如果细心观察,大家会发现,这些动画或者小游戏,是通过一些工具生成出来的,而不是 ...

Hello Createjs

前言