CreateJS入门 -- 注释详细到爆炸（My Style）

写在前面

首先，还是谢谢大家的支持，谢谢！记得在之前的文章中我说过自己算是一个半文艺程序员，也一直想着写一写技术性和其他偏文学性的文章。虽然自己的底子没有多么优秀，但总是觉得这个过程中可以督促自己去思考，督促自己去学习和交流。毕竟每天忙忙碌碌之余，还是要活出自己不一样的生活。

其次，我开通了个人的 个人主页 ，里面有自己的技术文章，还会有个人的随想、思考和日志。以后所有的文章都会第一时间更新到这里，然后同步到其他平台。有喜欢的朋友可以没事去逛逛，再次感谢大家的支持！

什么是CreateJS

官网介绍 （ 中文）：CreateJS 是一组模块化代码库和工具套件，可以独立工作也可以组合工作，用于通过HTML5技术来在网页上开发丰富的交互式内容。

四个核心库

CreateJS主要包含如下四个类库：

• EaselJS – 简化处理HTML5画布（核心）
• TweenJS – 用来帮助设计H5动画，调整HTML5属性
• SoundJS – 用来简化处理HTML5 audio 音频
• PreloadJS – 帮助管理和协调加载中的一些资源

今天，主要来了解一下 EaselJS 库

EaselJS

EaselJS 简介

EaselJS 是一个JavaScript库,用来简单快捷的操作 HTML5 Canvas 标签。在创建H5游戏，生成艺术作品、处理其他高级图形化等工作中有着很友好的体验。

EaselJS中的一些核心类

1. Stage Class -- 创建舞台
2. Text Class -- 绘制文字
3. Graphics Class -- 绘制图形
4. Shape Class -- 绘制图形
5. Bitmap Class -- 绘制图片
6. Ticker Class -- 定时广播
7. ......等

一些"栗子"

绘制文本(Text Class)

定义一个 画布。

// HTML:

调用EaselJS提供的API - new createjs.Text()，绘制文字

// JS

绘制图形(Graphics Class)

定义一个 画布。

// HTML:

调用EaselJS提供的API - new createjs.Graphics()，绘制图形

// JS

绘制图像imgaes(Bitmap Class)

定义一个 画布。

// HTML:

调用EaselJS提供的API - new createjs.Bitmap()，绘制图像

// JS

一个小游戏(来自官网Demo) Running man

定义一个画布

JS代码

这里就不写具体思路分析了，代码不长，注释也很详细，方便理解，直接上代码。

// JS

完整代码

示例demo的GitHub地址： 完整代码