Hello Createjs
前言
在這樣H5盛行的年代，我也來蹭蹭熱度，首先就是到處找學習資料。在我學習過程中發現好多教程都有介紹一個叫Createjs的東西（一般都是放到教程最后補充講的），現在我們就來好好研究下Createjs是個什么東東。由于是初次學習，所有難免出現各種不合理的，錯誤的地方，還請大神指點出來。這也就算是我的一個學習筆記吧，勉強當個教程吧。
先來看看Createjs的簡介： CreateJS是基于HTML5開發的一套模塊化的庫和工具。 基于這些庫，可以非常快捷地開發出基于HTML5的游戲、動畫和交互應用。這里是官網還是中文的。這里有Createjs一整套的源碼，可供下載 。
一、下載源碼
Createjs一共提供了4個小分類 EaselJS TweenJs SoundJS PreloadJS
這里我們先研究第一個，EaselJS，他提供了一套完整的，層次化的顯示列表的互動交互方式，來更簡單的處理HTML5畫布。
1官網下載：
打開官網按步驟一步一步操作
2gitub下載：
github地址
其實官網也是從這里下載的
解壓下載的文件。在解壓的文件中找到lib文件夾，該文件夾中就是我們需要的源碼。這里我們使用未壓縮的版本easeljs.js。壓縮版本easeljs.min.js一般只在項目發布的時候使用。
二、搭建一個簡單的Createjs場景
搭建一個簡單的Createjs場景。
我們的目標是: 在網頁上生成一個圓形
效果
首先是網頁部分， 我們先搭建一個標準的網頁開發環境，
1 找一個空白的文件夾，新建文件夾
文件夾js（存放所有的js腳本 包括我們需要學的EaselJs源文件）
文件夾CSS（存放css樣式表，這里用的并不是太多）。
index.html文件（網頁）
整個文件列表如下：
2 index.html代碼如下:
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>標題</title> <!-- 引用外部EaselJS庫--><script type="text/javascript" src="js/easeljs.js"></script> <!-- 添加自己的JavaScript代碼--><script type="text/javascript" src="js/index.js"></script></head><body><div> <!-- 添加canvas標簽 careateJs所有操作將在此標簽下進行，這和原生的HTML一樣--><canvas id="Game" width="550" height="400"></canvas></div></body> </html>3 index.js代碼如下
//當網頁加載完成 window.onload = function() {initGame(); }//聲明舞臺 var stage; //聲明圓形顯示對象 var circleShape;//初始化游戲 function initGame() {//創建舞臺 這里的 "Game" 對應的是index.html頁面中canvase的id//也就是告訴網頁我的舞臺就是你的canvasstage = new createjs.Stage("Game");//Shape類和Flash中的Shape類類似，包含了所有的繪圖功能，比如//drawRect 繪制矩形//drawCircle 繪制圓形//drawRoundRest 繪制圓角矩形//.....circleShape = new createjs.Shape();//為圓形圖像設置填充顏色//這里的顏色 是一種CSS中設置的顏色,也就是說CSS中怎么設置顏色 這就怎么設置 // "#ff000" "rgb(255,0,0)" "rgba(255,0,0,0.2)" "red"//但需要注意的是 必須要用引號括起來circleShape.graphics.beginFill("#00ff00");//繪制圓形圖像 在坐標點(0,0) 繪制半徑為50的圓circleShape.graphics.drawCircle(0,0,50);//結束繪制circleShape.graphics.endFill();//將繪制好的圓形圖像添加到舞臺中stage.addChild(circleShape);//設置圓形圖像的坐標點circleShape.x = 100;circleShape.y = 100;//更新舞臺 這一步不能少 不然舞臺不會顯示任何東西 stage.update(); }4 運行效果如下
三、梳理一下
1 創建舞臺
//"Game" 對應網頁中canvas的id var stage = new createjs.Stage("Game");2 繪圖類Shape 繪制各類矢量圖形 (后面具體再講)
3 beginFill填充顏色
這里的顏色設置和CSS中的顏色設置一樣
參數1 紅色 0~255
參數2 綠色 0~255
參數3 藍色 0~255
參數1 紅色 0~255
參數2 綠色 0~255
參數3 藍色 0~255
參數4 透明度 0~1
4將顯示對象添加到舞臺
stage.addChild(circleShape)至于顯示對象是什么 后面再講 現在只要知道我們創建的圓形圖像就是一個顯示對象
5刷新舞臺
stage.update();這句話一定要寫 不然舞臺不會顯示任何東西
總結
以上是生活随笔為你收集整理的Hello Createjs的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： matlab上万大型矩阵求逆,要好好总结
- 下一篇： BitLocker 秘钥如何获取