1 前 言

1.1 CreateJS介紹

image

CreateJS是基于HTML5開發(fā)的一套模塊化的庫和工具耘拇。
基于這些庫，可以非秤罟ィ快捷地開發(fā)出基于HTML5的游戲惫叛、動畫和交互應用。

A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5.

包含4類工具庫

1. EaselJS 提供了一套完整的逞刷，層次化的顯示列表的互動方式 來更簡單的處理HTML5畫布嘉涌。
2. TweenJS 類庫主要用來調整和動畫HTML5和Javascript屬性。提供了簡單并且強大的tweening接口夸浅。
3. SoundJS 提供了簡單而強大的API來處理音頻仑最。通過插件來執(zhí)行實際的音頻實現(xiàn)，無需學習平臺相關的知識帆喇，簡單直接的處理聲音警医。
4. PreloadJS 是一個用來管理和協(xié)調相關資源加載的類庫，它可以方便的幫助你預先加載相關資源坯钦，例如：圖片预皇、文件、音頻婉刀、數(shù)據(jù)等等吟温。

1.2 CreateJS版本

1.2.1 GitHub

地址：https://github.com/CreateJS

以 EaselJS 為例，js 文件存放在 lib 文件中

• easeljs.js v0.8.2 帶注釋版本
• easeljs.min.js v0.8.2 不帶注釋壓縮版本突颊，功能不受影響
• easeljs-NEXT.js v1.0.0
• easeljs-NEXT.min.js v1.0.0

1.2.2 英文

• 網址：https://www.createjs.com/
• API 文檔版本為 v1.0.0

1.2.3 中文

• 網址：http://www.createjs.cc/
• API 文檔版本為 v0.8.2（以 EaselJS 為例）

2 正 文

由于 createjs 各個庫中代碼都使用了：

this.createjs = this.createjs || {}

因為這里的 this 并不是掛載在 window 對象上鲁豪，所以無法直接從 import 中引用。

2.1 方法一

2.1.1 安裝yuki-createjs

GitHub : https://github.com/yuki-torii/yuki-createjs

npm i -S yuki-createjs

注意這里下載的版本不是官網最新版本律秃。

2.1.2 使用yuki-createjs

// include all
import 'yuki-createjs' 
// or 
require('yuki-createjs')

// include one
import 'yuki-createjs/lib/preloadjs-0.6.2.combined'
// or
require('yuki-createjs/lib/preloadjs-0.6.2.combined')

2.1.3 例 子

// helloworld.vue

<template>
...
    <canvas id="idd11" width="500" height="400"/>
...
</template>

<script>
    require('yuki-createjs/lib/easeljs-0.8.2.combined')
    export default {
        //  這里主要不能放在 created() 里
        mounted(){
            this.init()
        },
        methods: {
            init(){
                var canvas = document.getElementById('idd11')
                var stage = new createjs.Stage(canvas)
                var text = new createjs.Text("Hello World!", "36px Arial", "#777")
                text.textAlign = "center"
                text.x = 100
                text.y = 0
                stage.addChild(text)
                stage.update()
            },
        }
    }
</script>

我是直接在 Vue 新建的項目里爬橡，HelloWorld.vue 來進行修改， 效果圖如下：

image

2.2 方法二

2.2.1 createjs-cmd

npm i -S createjs-cmd

GitHub：https://github.com/yedaodao/createjs-cmd

同方法一棒动，下載的不是最新版本糙申。

2.2.2 使 用

import createjs from 'createjs-cmd'

2.3 方法三

2.3.1 script-loader

npm i -S script-loader
npm i -S createjs

下載的各個版本都有，可以來引用 1.0.0 版本迁客，但是包含4個庫

npm i easeljs 下載的只包含舊版

2.3.2 使 用

import 'script-loader!createjs/builds/1.0.0/createjs.min.js';

2.4 方法四

2.4.1 @createjs/easeljs

npm i @createjs/easeljs

2.4.2 使 用

import * as createjs from '@createjs/easeljs'

2.0 BETA版（當前是這樣的郭宝，由于文章時效性，以后不清楚 ??????）

2.5 方法五

2.5.1 vue-easeljs

GitHub：https://github.com/dankuck/vue-easeljs

具體可參考GitHub掷漱，沒有其他參考API粘室，封裝成了標簽，感興趣的可以嘗試下

3 總結

列了一個表格將5種方法比較一下

• 類似于 script-loader 還可以使用 imports-loader 卜范，但試了幾次沒成功????衔统，原諒我太菜了

• 2.0 Beta 版已支持 ES6，相信等正式版出的時候海雪，這個問題就完全不用擔心了锦爵。

4 后 記

感謝支持。若不足之處奥裸，歡迎大家指出险掀，共勉。

如果覺得不錯湾宙，記得 點贊樟氢，謝謝大家 ??

歡迎關注 我的： 【Github】 【掘 金】 【簡 書】

本文章采用 知識共享署名-非商業(yè)性使用-相同方式共享 4.0 國際許可協(xié)議 進行許可。

出處為：https://github.com/xrkffgg/Tools