CreateJS入門 -- 注釋詳細到爆炸（My Style）

Render 發布于2019-08-22 18:49 / 560人閱讀

摘要：以后所有的文章都會第一時間更新到這里，然后同步到其他平臺。獲取畫布的寬和高，后面計算使用定義靜態資源人物動作雪碧圖天空地面遠山近山創建資源加載隊列用還是用標簽來加載如果是的時候，就用標簽來加載，如果不能用標簽的話，就用來加載。

寫在前面

首先，還是謝謝大家的支持，謝謝！記得在之前的文章中我說過自己算是一個半文藝程序員，也一直想著寫一寫技術性和其他偏文學性的文章。雖然自己的底子沒有多么優秀，但總是覺得這個過程中可以督促自己去思考，督促自己去學習和交流。畢竟每天忙忙碌碌之余，還是要活出自己不一樣的生活。

其次，我開通了個人的 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地址：完整代碼

云服務器 GPU云服務器 CreateJS linux入門到前端入門到精通 css入門到精通

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96241.html

CreateJS入門 -- 注釋詳細到爆炸（My Style）

摘要：以后所有的文章都會第一時間更新到這里，然后同步到其他平臺。獲取畫布的寬和高，后面計算使用定義靜態資源人物動作雪碧圖天空地面遠山近山創建資源加載隊列用還是用標簽來加載如果是的時候，就用標簽來加載，如果不能用標簽的話，就用來加載。寫在前面首先，還是謝謝大家的支持，謝謝！記得在之前的文章中我說過自己算是一個半文藝程序員，也一直想著寫一寫技術性和其他偏文學性的文章。雖然自己的底子沒有多么優...

liangdas 2019-08-02 10:58 評論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