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

liangdas 发布于2019-08-02 10:58 / 480人阅读

摘要：以后所有的文章都会第一时间更新到这里，然后同步到其他平台。获取画布的宽和高，后面计算使用定义静态资源人物动作雪碧图天空地面远山近山创建资源加载队列用还是用标签来加载如果是的时候，就用标签来加载，如果不能用标签的话，就用来加载。

写在前面

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

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

什么是CreateJS

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

四个核心库

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

EaselJS – 简化处理HTML5画布（核心）

TweenJS – 用来帮助设计H5动画，调整HTML5属性

SoundJS – 用来简化处理HTML5 audio 音频

PreloadJS – 帮助管理和协调加载中的一些资源

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

EaselJS

EaselJS 简介

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

EaselJS中的一些核心类

Stage Class -- 创建舞台

Text Class -- 绘制文字

Graphics Class -- 绘制图形

Shape Class -- 绘制图形

Bitmap Class -- 绘制图片

Ticker Class -- 定时广播

......等

一些"栗子" 绘制文本(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 定义一个画布





  
  
  
  running-man game

JS代码

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

// JS

完整代码

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

服务器托管私有云 CreateJS linux入门到前端入门到精通 css入门到精通

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52675.html

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

摘要：以后所有的文章都会第一时间更新到这里，然后同步到其他平台。获取画布的宽和高，后面计算使用定义静态资源人物动作雪碧图天空地面远山近山创建资源加载队列用还是用标签来加载如果是的时候，就用标签来加载，如果不能用标签的话，就用来加载。写在前面首先，还是谢谢大家的支持，谢谢！记得在之前的文章中我说过自己算是一个半文艺程序员，也一直想着写一写技术性和其他偏文学性的文章。虽然自己的底子没有多么优...

Render 2019-08-22 18:49 评论0 收藏0
H5实例教学--从AnimateCC到CreateJS入门

摘要：源码以及资源地址下载链接密码首先，打开文件，可以看到库里面有几个待使用的元件我们先用软件自带的发布功能发布一下快捷键也可以在文件里选择发布发布后在文件旁边会有一个和一个我们打开可以看到这样的代码片段我们新建一个，把生成的部分的代源码以及资源地址下载：链接: http://pan.baidu.com/s/1kU8LBTH 密码: j7hu 首先，打开flash文件，可以看到库里面有几个...

nihao 2019-08-20 14:22 评论0 收藏0
H5实例教学--从AnimateCC到CreateJS入门

摘要：源码以及资源地址下载链接密码首先，打开文件，可以看到库里面有几个待使用的元件我们先用软件自带的发布功能发布一下快捷键也可以在文件里选择发布发布后在文件旁边会有一个和一个我们打开可以看到这样的代码片段我们新建一个，把生成的部分的代源码以及资源地址下载：链接: http://pan.baidu.com/s/1kU8LBTH 密码: j7hu 首先，打开flash文件，可以看到库里面有几个...

luckyw 2019-08-01 16:19 评论0 收藏0