https://zhuanlan.zhihu.com/p/40799542
簡介

CreateJS是基于HTML5開發的一套模塊化的庫和工具，基于這些庫，可以非常快捷地開發出基于HTML5的游戲、動畫和交互應用。

歷史可以追溯到7年前 flash 使用慢慢變少那個時代，gskinner 開發它作為“下一代”的富交互的工具庫，Adobbe、微軟、火狐官方資助的一個項目，API 在很多地方和 Flash 是很像，同時可以通過Adobe Animate CC（替代 flash）直接導出Canvas在Web中使用。

在 18年 終于發布了 1.0 版本，同時官方正在開發 2.0 版本，相信不就會有一個更現代化的 Createjs 呈現給開發者。

模塊組成

CreateJS 提供的 4 個模塊可以幫助處理游戲開發中常見操作： EaselJS：用于位圖、圖形、Sprites、文本的繪制，還包含 Ticker 定時器 TweenJS：用來創建補間動畫效果 PreloadJS：游戲資源的預加載和管理，包括圖片、音頻、json等資源 SoundJS：播放和處理音頻

更好使用

目前官方版本的 createjs 不支持通過 npm 方式的使用，導致在 ES6 開發中，需要在 html 中手動引入一個

createjs-npm 通過 imports-loader、exports-loader 對官方庫加了一層膠水，讓大家可以向使用 npm 包方式一樣使用，具體為：

// 安裝后和官方 createjs 1.0 使用一致 npm install createjs-npm -S// 引入全部模塊 import createjs from 'createjs-npm';// 只引入單個模塊（xx 可以是 easel、preload、tween、sound） import createjs from 'createjs-npm/lib/xx'; EaselJS 的使用 EaselJS 在 Createjs 中承擔 畫 的能力，比如說你要畫圖片、畫圖形、畫幀動畫、畫文字可以使用它的 API 實現。

步驟

比如說你需要在畫一個紅色的圓，必含步驟為創建舞臺->創建對象->設置對象屬性->添加對象到舞臺->更新舞臺呈現下一幀：

//創建一個舞臺，得到一個參考的畫布const stage = new createjs.Stage("myCanvas");//創建一個形狀的顯示對象const circle = new createjs.Shape();circle.graphics.beginFill("red").drawCircle(0, 0, 40);//形狀實例的設置位置circle.x = circle.y = 50;//添加形狀實例到舞臺顯示列表stage.addChild(circle);//更新舞臺將呈現下一幀stage.update();

總結

以上是生活随笔為你收集整理的CreateJS 指南的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。