久久精品中文字幕av,av.涩涩涩涩涩涩涩涩,亚洲国产日韩欧美精品成人久久久,成人福利电影免费在线观看,日产国产原创av,日韩av午夜激情,bt天堂中文字幕,超级碰人妻在线视频,欧美老熟妇久久一区二区

http://www.createjs.cc/src/docs/easeljs/modules/EaselJS.html ## 我們用的最多的就是上面這個(gè)API，不懂英文的可以直接翻譯就OK，本手冊(cè)也會(huì)在最后獻(xiàn)上該API的全譯版本。 ### 這里的游戲引擎說(shuō)白了就跟Jquery一樣是封裝了一個(gè)js文件。 >### 快速入門(mén) * * * * * >[danger]### 1. EaselJS的大致api * 畫(huà)圖片用(Bitmap) * 畫(huà)圖形，比如矩形，圓形等用(Shape) 【類(lèi)似于改變坐標(biāo)x，y，增加陰影shadow，透明度alpha，縮小放大scaleX/scaleY都可以做到】 * 畫(huà)文字，用(Text) * 還有容器Container的概念，容器可以包含多個(gè)顯示對(duì)象 >[info]### 2. EaselJS繪圖的大致流程 >[info]大致流程：創(chuàng)建顯示對(duì)象→設(shè)置一些參數(shù)→調(diào)用方法繪制→添加到舞臺(tái)→update()，代碼如下： ~~~ <script src="easeljs-0.7.1.min.js"></script> //引入相關(guān)的js文件 <canvas id="canvas"></canvas> var canvas = document.querySelector('#canvas'); //創(chuàng)建舞臺(tái) var stage = new createjs.Stage(canvas); //創(chuàng)建一個(gè)Shape對(duì)象，此處也可以創(chuàng)建文字Text,創(chuàng)建圖片Bitmap var rect = new createjs.Shape(); //用畫(huà)筆設(shè)置顏色，調(diào)用方法畫(huà)矩形，矩形參數(shù)：x,y,w,h rect.graphics.beginFill("#f00").drawRect(0, 0, 100, 100); //添加到舞臺(tái) stage.addChild(rect); //刷新舞臺(tái) stage.update(); ~~~ **graphics可以設(shè)置一些樣式，線條寬度，顏色等等，也可以調(diào)用一些方法繪制圖形，比如矩形drawRect，圓形drawCircle等等，具體可以自己查看api。** 注意：記得一定要把shape對(duì)象加到舞臺(tái)上，否則屏幕上不會(huì)顯示。 >[success]### 3. Ticker定時(shí)器 >寫(xiě)createjs肯定會(huì)遇到的一個(gè)，就是ticker，主要就是定時(shí)刷新舞臺(tái)，理想的幀速率是60FPS ~~~ createjs.Ticker.setFPS(60); ~~~ >[info]### 4. 控制多個(gè)顯示對(duì)象的層級(jí)關(guān)系 >**stage，contain對(duì)象有個(gè)children屬性代表子元素，是一個(gè)數(shù)組，里面的元素層級(jí)像下標(biāo)一樣從0開(kāi)始，簡(jiǎn)單來(lái)說(shuō)就是后面的覆蓋前面的，addChild方法是添加到顯示列表的最后。 我們也可以動(dòng)態(tài)改變children的層疊效果。** ~~~ stage.setChildIndex(red,1); ~~~ >[danger]### 5.容器 container >**它可以包含Text、Bitmap、Shape、Sprite等其他的EaselJS元素，包含在一個(gè)Container中方便統(tǒng)一管理。 比如一個(gè)人物，他由手，腳，頭，身體組成，你可以將這幾個(gè)部分放在同一個(gè)container中，統(tǒng)一移動(dòng)。使用方法也比較簡(jiǎn)單：** ~~~ var contain = new createjs.Container(); contain.addChild(bgImg); contain.addChild(bitmap); stage.addChild(contain); ~~~ ### **蹬蹬蹬～本篇文章的重點(diǎn)，繪制圖像并對(duì)圖像進(jìn)行處理** >[warning]### 6. 繪制圖片 > ~~~ var bg = new createjs.Bitmap("./background.png"); stage.addChild(bg); stage.update(); ~~~ **按照上面的EaselJS的正常的繪制流程來(lái)說(shuō)，上面這段代碼應(yīng)該可以正常顯示。但是，只是有些情況下可以正常顯示的，這個(gè)圖像資源需要確定加載成功后才可以new，否則不會(huì)有圖像在畫(huà)布上，如果有做資源預(yù)加載，可以直接使用上面的代碼，如果沒(méi)有，則需要在image加載完成onload之后才進(jìn)行繪制** ~~~ var img = new Image(); img.src = './img/linkgame_pass@2x.png'; img.onload = function () { var bg = new createjs.Bitmap("./background.png"); stage.addChild(bg); stage.update(); } ~~~ 僅僅繪制圖片是不夠的，createjs提供了幾種處理圖片的方法： >[info]### 6.1 給圖片增加遮罩層 >使用mask屬性，可以只顯示圖片和shape相交的區(qū)域 > ~~~ stage = new createjs.Stage("gameView"); bg = new createjs.Bitmap("./img/linkgame_pass@2x.png"); bg.x = 10; bg.y = 10; //遮罩圖形 shape = new createjs.Shape(); shape.graphics.beginFill("#000").drawCircle(0, 0, 100); shape.x = 200; shape.y = 100; bg.mask = shape; //給圖片bg添加遮罩 stage.addChild(shape); stage.addChild(bg); stage.update(); ~~~ **常用應(yīng)用場(chǎng)景：用來(lái)剪裁圖片，比如顯示圓形的圖片等**  >[danger]### 6.2 給圖片增加濾鏡效果 > ~~~ var blur = new createjs.BlurFilter(5,5,1); bg.filters = [blur]; ~~~ **我們發(fā)現(xiàn)，圖片還是沒(méi)有變模糊，原因是圖片添加了filter后stage立即刷新，filter只能保持一幀的效果，第二幀filter則失效了。而使用圖片的cache()方法后，可以使得無(wú)論舞臺(tái)怎么刷新，都可以保持住Filter的效果，添加cache還有很多作用，可以提高FPS，緩存等** ~~~ bg.cache(0,0,bg.image.width,bg.image.height); ~~~ >[success]### 6.3 使用Rectangle剪裁圖片 > ~~~ stage = new createjs.Stage("gameView"); bg = new createjs.Bitmap("./img/linkgame_pass@2x.png"); bg.x = 10; bg.y = 10; var rect = new createjs.Rectangle(0, 0, 121, 171); bg.sourceRect = rect; stage.addChild(bg); stage.update(); ~~~ ## 適用場(chǎng)景：拼圖小游戲，剪裁圖片……  >[info]### 7. createjs事件 >easeljs事件默認(rèn)是不支持touch設(shè)備的，需要以下代碼才支持： > ~~~ createjs.Touch.enable(stage); ~~~ 對(duì)于Bitmap，Shape等對(duì)象，都可以直接使用addEventListener進(jìn)行事件監(jiān)聽(tīng) ~~~ bitmap = new createjs.Bitmap(''); bitmap.addEventListener（‘click’，handle）; ~~~ >[danger]### 8. CreateJs的渲染模式 >CreateJs提供了兩種渲染模式，一種是用setTimeout，一種是用requestAnimationFrame，默認(rèn)是setTimeout，默認(rèn)的幀數(shù)是20，一般的話還沒(méi)啥，但是如果動(dòng)畫(huà)多的話，設(shè)置成requestAnimationFrame模式的話，就會(huì)感覺(jué)到動(dòng)畫(huà)如絲般的流暢。 > ~~~ createjs.Ticker.timingMode = createjs.Ticker.RAF; ~~~ >[warning]### 9.適配 >在移動(dòng)端開(kāi)發(fā)中，不得不面對(duì)一個(gè)多屏幕，多尺寸的問(wèn)題，所以適配問(wèn)題顯得特別重要。 先固定canvas的width為750，根據(jù)設(shè)備的高寬比設(shè)置對(duì)應(yīng)750寬的高，然后用css將canvas的縮放或拉伸整個(gè)屏幕，這種方法可以保證canvas內(nèi)部的元素的邏輯尺寸大小不發(fā)生變化，也能達(dá)到適配 ~~~ <canvas id="game" width="750" height="700"></canvas> ~~~ 注意，以上代碼的width，height不同于css中的width，height。 比如，你在canvas內(nèi)部繪制圖片，用x，y軸進(jìn)行定位，這里的x，y是相對(duì)于canvas這個(gè)整體。 我們?cè)侔裞anvas當(dāng)成一整張圖片使用css進(jìn)行適配 ~~~ canvas{ width: 100%; } ~~~ 那么，就會(huì)有以下的效果，canvas會(huì)適配屏幕尺寸，里面的圖片也會(huì)等比例變大變小。