CreateJS入门 -- 注释详细到爆炸(My Style)

写在前面

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

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

什么是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

定义一个画布





  
  
  
  running-man game


  
  

JS代码

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

// JS

完整代码

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

你可能感兴趣的:(createjs,html5,html,javascript)