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