新手寫createjs一定會遇到很多的坑，下面我來講下常見的坑和解決方法，大家可以經(jīng)常來看看這篇文章，本人會持續(xù)更新！

1.按鈕的alpha值不能為0:

在做flash的時候很多人會弄一個alpha值為0的按鈕放在圖片上代替圖片按鈕點擊，以減少項目的大小。但是在createjs中所有對象 alpha為0時都不受任何鼠標事件影響。不過解決起來也非常容易，alpha設(shè)為%1(0.01)就可以了(設(shè)置hitArea也可以，而且更方便)。

2.項目中有使用引導(dǎo)層 必須在初始化中寫上createjs.MotionGuidePlugin.install();

這個就不用多說了 如果項目中的動畫有用到引導(dǎo)層 初始化的時候加上這句話就可以了。

3.項目中使用音樂時 必須在加載時寫上loader.installPlugin(createjs.Sound);

這個也不多解釋同上。

4.用到mouseOver事件的時候需要加一句stage.enableMouseOver();要讓移動端支持createjs的點擊等鼠標事件時需要加上createjs.Touch.enable(stage);

5.js function 內(nèi)部的this指向和as3是不一樣的，需要額外保存this。

xx.addEventListener("click",function?(){

this.xxxx()//這是錯誤的

})

var?_this?=?this;

xx.addEventListener("click",function?(){

_this.xxxx()//這是正確的

})

6.跨域錯誤(一般錯誤信息中有顯示cross-domain都是跨域錯誤，新手常發(fā)生在點擊和加載的時候，我不說很多新手甚至不知道這是跨域錯誤)，先排查地址是不是在線上或者本地環(huán)境中的，地址是http或者https開頭就是在線上，local開頭就是本地模擬環(huán)境，file開頭就是以文件模式打開，chrome會默認阻止訪問本地圖片，所以file開頭就會跨域。排除環(huán)境問題，如果還是跨域就讓后臺改權(quán)限。如果排除環(huán)境問題，點擊的時候還是跨域，那就這么處理，如果是animateCC就在上面蓋一層alpha為1%的元件，如果是線上點擊跨域就這么寫：

var hitArea = new createjs.Shape();

hitArea.graphics.beginFill("#000").drawRect(0,0,100,100);//這里的大小為圖片大小，請自己調(diào)整

bitmap.hitArea = hitArea;

7.圖片的名字不能與原件類鏈接名相同 (后綴名不同也算相同),fla的名字不能和元件的類鏈接名相同，不然new對象的時候會new成別的對象，從而顯示錯誤或者什么都不顯示。

8.效率方面的優(yōu)化，注重項目加載速度時多用矢量 注重項目體驗與動畫流暢時多用位圖，現(xiàn)因為國產(chǎn)舊手機多對矢量支持不好，特別是安卓，還是多用位圖吧，png用工具優(yōu)化，推薦使用https://tinypng.com/，如果硬要用矢量，或者濾鏡，或者疊加模式，可以使用SpriteSheetBuilder類優(yōu)化，詳細教程點擊這里。

9.CC生成的對象不能用createjs的方法繼承，需要特殊繼承。

10.tween在MoiveClip的timeline的運行會從毫秒計算變成幀計算，如wait(1)-幀?，wait(1000)-毫秒。

11.animateCC如果要使用資源整合sprite表功能，請把png和jpg分開，因為不分開會很大(flashcc沒有這個功能所以別用)，動畫素材的整合大小不要大于1000*1000，因為createjs的bug，整合拆分也算作整合的大小，然而圖片越大性能越差，最后整合就會比不整合卡很多(但是也不能不整合，小圖片多了，就算開多線程加載，加載速度也很慢)，不動的素材，比如背景圖可以稍微大點，但注意也不能太大，任何素材太大都會被瀏覽器強制縮小，如果必須要大圖，就拆成幾個小圖，下面是推薦設(shè)置：

animateCC2019以后的紋理設(shè)置推薦參數(shù)

12.createjs偵聽點擊事件是會穿透的，也就是在上面掩蓋東西是無效的，不過也有辦法解決，在掩蓋對象上面放一個空的點擊偵聽就可以了。

13.動畫過多微信上切換程序后切回會掉幀，某些版本手機會出現(xiàn)，某些版本微信會直接關(guān)掉瀏覽器再打開就不會掉幀，當然這不是createjs的原因，因為css動畫也會出現(xiàn)這個問題，是整個瀏覽器的幀頻掉了(如果有大佬發(fā)現(xiàn)什么可以解決這個bug的方法請留言，謝謝，不過貌似最近微信修復(fù)了這個BUG)

14.如果出現(xiàn)無法跳幀，把MC的autoReset設(shè)置為false就好了，如果還不行setTimeout延時跳幀或者把跳幀代碼寫到第二幀。

(一般無法跳幀是MC還未初始化完成就跳幀導(dǎo)致的，這種情況一般是延時跳幀setTimeout就可以了，也有一種情況是跳幀的時候mc還不在舞臺上，alpha值為0，visible為false，等原件不能呈現(xiàn)的情況，如果是這種情況那就設(shè)置MC的autoReset為false就可以了)

15.使用animateCC項目間粘貼資源的時候，如果有類鏈接，需要重新賦予一遍，否則不會被導(dǎo)出。

16.使用animateCC做遮罩層的時候，遮罩層只能有一個元件，并元件內(nèi)部不能有元件動畫，不能有超過一幀，否則會被提示 不支持的功能:遮罩中有多幀符號。

17.graphics在使用moveTo lineTo時如果異步畫線需要重新設(shè)置樣式

比如：

var?shape?=?new?createjs.Shape();

container.addChild(shape);

shape.graphics.setStrokeStyle(2).beginStroke("#000000");

shape.graphics.moveTo(0,0);

shape.graphics.lineTo(100,100);

shape.graphics.lineTo(200,150);

shape.graphics.lineTo(300,50);

這樣是對的 可以只設(shè)置一個style然后不停的lineTo下去，但是如果setTimeout或者click后再畫就不行了，比如：

var?shape?=?new?createjs.Shape();

container.addChild(shape);

shape.graphics.setStrokeStyle(2).beginStroke("#000000");

shape.graphics.moveTo(0,0);

shape.graphics.lineTo(100,100);

shape.graphics.lineTo(200,150);

shape.graphics.lineTo(300,50);

setTimeout(function?(){

//????????shape.graphics.lineTo(400,300);//這里直接lineTo雖然顏色不會變但是粗細就變了，不知道是不是createjs的BUG

shape.graphics.setStrokeStyle(2).beginStroke("#000000");//這樣重新設(shè)置樣式后就沒問題了

shape.graphics.moveTo(300,50);

shape.graphics.lineTo(400,300);

},2000)

18.直接使用animateCC發(fā)布功能導(dǎo)出sprite圖，圖與圖之間會有1像素間隔，有時候會在項目圖片的邊框上出現(xiàn)底色，

解決辦法：animateCC發(fā)布設(shè)置-》sprite表-》jpeg設(shè)置-》最大大小設(shè)置為1 也就是說jpg圖不融合sprite，png沒關(guān)系，因為png是透明的，沒有底色。

19.項目圖片模糊，多半是移動端沒有做2倍像素，PC端多半是自適應(yīng)出問題了，詳細教程可以看：

關(guān)于自適應(yīng)的那點事

20.一段時間點狂點click事件會掉幀，換成mousedown就好了。

21.animateCC軟件中圖片模糊。

右鍵庫里的圖片，把允許平滑關(guān)掉(關(guān)掉后縮放可能會出現(xiàn)鋸齒，這個是CC的情況，因為原來flash的機制是這樣的，canvas項目導(dǎo)出后是不會有的)

22.在animateCC做補間的時候，先把圖片或者矢量變成影片剪輯再做，不然導(dǎo)出的代碼量會變大，還有可能會出問題。

23.在animateCC遮罩里做補間時，由于animateCC為了兼容，對象都是放在時間軸addTween而不是addChild，所以會出現(xiàn)一大堆矢量代碼，如果有代碼潔癖的，可以把這個功能用代碼寫，而不用animateCC。

24.使用createjs.Ticker.timingMode = ?createjs.Ticker.RAF會使程序快很多，但是幀頻會變得不可控。使用createjs.Ticker.timingMode = ?createjs.Ticker.RAF_SYNCHED;時注意FPS設(shè)置的比預(yù)期高一點，比如你要幀頻30就要設(shè)置成32。因為RAF的機制一但30到不了他就降級，30的下一級就是20,會造成程序慢很多。

25.animateCC不支持濾鏡緩動，如果要使用濾鏡緩動需要自己寫代碼，比如這樣：

html>

var?canvas?=?document.getElementById("canvas");

var?stage?=?new?createjs.Stage(canvas)//不用stagegl也行就是慢點

//????var?stage?=?new?createjs.StageGL(canvas)//用stagegl性能會好不少?但是會有背景色?需要自己拿底遮

var?shape?=?new?createjs.Shape();

shape.graphics.beginFill("#ff0000")

shape.graphics.drawRect(0,0,250,120);

shape.graphics.endFill();

stage.addChild(shape);

shape.x?=?100;

shape.y?=?100;

var?blurFilter?=?new?createjs.BlurFilter(5,?5,?1);

shape.filters?=?[blurFilter];

createjs.Tween.get(blurFilter).to({'blurX':40,'blurY':40},2000)

createjs.Ticker.framerate?=?60;

createjs.Ticker.addEventListener("tick",function?(){

stage.update();

shape.cache(-40,?-?40,?250?+?80,?120?+?80);

})

26.stagegl能大幅度提升性能，但是須要避免使用矢量，遮罩，濾鏡，疊加方式等，因為使用這些stagegl須要不停的cache，這樣對性能的消耗非常大(實在要用，使用SpriteSheetBuilder渲染后使用)

27.如果再使用animateCC2018或者蘋果系統(tǒng)使用animate時出現(xiàn)Uncaught ReferenceError: lib is not defined的錯誤，請看這篇文章

animateCC2018及蘋果使用animateCC使用須知(必看)

28.如果顯示對象上的子集過多，會造成createjs的點擊變卡，解決辦法1：新建1個shape來點擊，2：用hitarea定義點擊對象且該對象的子集也不能很多，可以使用shape，3：改用touch事件,4點擊對象cache(需要保證對象內(nèi)部不會變)

29.如果要在animateCC的第一幀上寫代碼，且這個movieclip只有一幀，也需要在第一幀上加this.stop()，不然上面的代碼會不停的調(diào)用(createjs1.0版本的bug，2015版本沒有)。

30.之前flash中的元件的name等于他影片剪輯的名稱，但是canvas項目并不是，canvas項目影片剪輯的名稱只是他父對象的一個屬性而已，并不包括名稱，也就是并不能用if(e.target.name==xx)這樣來判斷，也不能用getChildByName來獲取。

31.stagegl中使用cache運行遮罩，濾鏡，疊加模式時，需要套一層container，在container上cache。

32.animateCC中如果使用濾鏡變化(就是濾鏡數(shù)值不同，或者從無到有)，animateCC是不會導(dǎo)出濾鏡的，這時候很容易讓人有種無法跳幀的錯覺，其實不是無法跳幀，是根本沒有導(dǎo)出有關(guān)濾鏡的代碼，這么做的原因是為了保護性能，那怎么解決這個問題呢？很簡單，就是把濾鏡做成一張圖片放進去就好了。

33.想要濾鏡，alpha只在父容器應(yīng)用而不在子容器應(yīng)用，把父容器cache一下就好了(容器alpha后子容器的不透明度會疊加，造成整個顯示對象不透明度不同的情況，設(shè)置cache可以解決)

34.項目莫名在30幀上不去或者莫名卡的的時候，看看是不是開了省電模式，很多時候關(guān)掉省電模式幀頻又能上去。

35.在animateCC中，as3項目的圖片平滑，在html5項目中并不起作用，createjs也沒有直接提供平滑的api，但是我們可以自己做，參考：http://www.ajexoop.com/wordpress/?p=1167

36. var loader = new createjs.LoadQueue(true); 加載大量素材時必須啟用xhr模式，也就是參數(shù)里面寫true，否則加載時間過長會報錯。

37.在使用DOMElement的時候，如果dom會超過屏幕本身，請在dom外面加個div容器，并限制它的寬度，不然會出現(xiàn)自適應(yīng)問題，設(shè)置如下：

*{

margin:?0;

padding:?0;

}

body{

overflow-x:hidden;

}

.ui-con{

width:?750px;height:1334px;overflow:?hidden;position:?absolute;pointer-events:?none;

}

.code{

position:?absolute;left:?-999px;pointer-events:?auto;

}

????

38.如果你要在animateCC中寫代碼，并訪問根容器就訪問這個對象exportRoot，exportRoot相當于as3的root。

39.如果你的顯示對象是用animateCC做的，你可以用mc.nominalBounds.width,mc.nominalBounds.height來訪問長寬，但是只能訪問不能控制，也就是只讀的。

40.操作bitmap時，很多api需要在bitmap的image已經(jīng)加載完成的情況下使用，所以萬一你出現(xiàn)了與你預(yù)期不同的情況，多半是image還沒有加載完成，你可以這樣解決：

var?bitmap?=?new?createjs.Bitmap("xxx/xx.jpg");

bitmap.image.onload?=?function?(){

//在這里寫操作邏輯，或者寫好操作邏輯在這里調(diào)用

}

41.在animateCC里使用組件功能時報jquery的錯，就多刷新保存幾下。

42.animateCC中組件操作代碼和一般對象操作代碼完全不一樣，詳細打開animateCC的代碼片段參閱(其實常用的代碼，代碼片段里都有，代碼片段的位置參考下圖)。

43.如果要操作animateCC元件中子元件的坐標與大小，請設(shè)置好這個點(按Q可以設(shè)置)，這個點相當于代碼中的注冊點regX，regY，createjs的默認注冊點在左上角，而animateCC在中間，這個要記住。還有子元件在animateCC中，坐標是根據(jù)左上角來算的，但是發(fā)布后代碼是根據(jù)注冊點加位置算的坐標，這個很容易搞錯。

44.有部分素材或者動畫顯示不出來？看看是不是打散和資源合并sprite表功能一起用了。如果是選擇其中一個，推薦選擇合并sprite表，然后把打散的資源轉(zhuǎn)位圖(這里是推薦，具體還要看項目)

45.項目需要加載多個fla的時候，需要區(qū)分命名空間，2018只需要區(qū)分adobeid(不會弄就不要弄多個fla，放在一個fla中)

46.連續(xù)畫圖需要閉合路徑，圓需要額外的重置繪制點，具體做法看下面代碼，詳細解釋看文章：http://www.ajexoop.com/wordpress/?p=477

stage.addEventListener("stagemousedown",function?(event){

shape.graphics.drawCircle(event.rawX,event.rawY,10).closePath();

shape.graphics.drawCircle(0,0,0).closePath();

});

47.animateCC的canvas項目中，遮罩層上的元件是不能通過代碼用元件名控制的，而是用mask，mask_1這個名字獲取控制(神奇的設(shè)定)

48.不要用resize事件來判斷瀏覽器長寬，因為很多設(shè)備resize之后瀏覽器長寬變化是會延時的，解決辦法為要不延時判斷，要不一直判斷比如定時器(這個bug不是createjs的坑，是手機瀏覽器的坑)

49.在使用shape繪圖的時候不要再drawXXX中賦值坐標，而是在drawXXX中參數(shù)選擇0,0 然后在x y當中賦值坐標。詳細解釋文章：

50.如果元件要命名，一定要在所有關(guān)鍵幀上都命名，并且要命名一模一樣，不然不僅有時候代碼會調(diào)用不到，還會出現(xiàn)畫面一閃的bug。

51.animateCC有時候會出現(xiàn)發(fā)布后的素材大小和編輯的時候不一致，或者說之前刪掉的素材又出現(xiàn)了。這個bug是animateCC的，至今原因不明，替換素材的時候有幾率產(chǎn)生，估計是animateCC緩存的資源并沒有被替換造成的，如果出現(xiàn)這個bug，你新建一個fla把素材全部考過去重新發(fā)布就可以了，如果不確定是不是這個原因，你可以先用這個方法測一下，素材是否恢復(fù)。

52.LoadQueue的setMaxConnections方法可以開啟多線程加載，加快加載速度，但是用setMaxConnections開啟多線程加載的時候，必須讓maintainScriptOrder=false，否則多線程還是不會開啟。

53.把顯示對象設(shè)置cursor = "pointer"或者直接使用ButtonHelp會自動給canvas的css設(shè)置cursor:"pointer",會在移動端造成整個canvas閃一下，設(shè)置createjs.Touch.enable(stage)可以修復(fù)這個bug，如果遇到createjs.Touch.enable(stage)不能設(shè)置的時候(比如需要在dom層滾動)，把cursor 設(shè)置為"auto"，反正移動端不需要手型指針。

54.canvas或者圖片寬高超過4000左右就會出問題，特別是canvas不是說舞臺設(shè)置不超過4000就沒事，需要計算手機的分辨率。比如你的anCC或canvas設(shè)置是720*2800，看似沒有超，但是如果是全面屏手機寬度是1125，自適應(yīng)后分辨率就會變?yōu)?125*4375，就超過了，這也是為什么有些人會出現(xiàn)有些手機不能顯示有些手機可以顯示的bug。那么解決呢？如果圖片超過了就切開來再組合，如果是canvas超過了，需要做長圖效果，就用內(nèi)部的滑動邏輯(我博客有封裝好的-》MoveControl)

55.如果要在ancc里直接做拖拽，需要強制關(guān)閉他的自適應(yīng)，加入自己的自適應(yīng)，詳情點擊：http://www.ajexoop.com/wordpress/?p=1423

56.由于createjs是在初始化的時候根據(jù)設(shè)備選擇偵聽方式的，所以你瀏覽器從pc切換移動端，或者從移動端切換pc的時候千萬記得刷新一下，否則有關(guān)點擊的事件都會失效。

57.在animateCC2018以上版本的時候，元件中有運行代碼的情況下，單幀必須寫上this.stop();多幀必須寫上運行代碼只運行一遍的邏輯(不然你的代碼會被運行成千上萬遍)。

58.animateCC2019以上中的，發(fā)布設(shè)置=》圖像設(shè)置=》分辨率 設(shè)置為1，詳細看問題11。

59.canvas內(nèi)不能留有通道，也就是說，必須把素材塞滿整個canvas(其實最簡單的辦法就弄張跟canvas一樣大的圖片放進canvas里)，不然會卡。

60.舞臺大小不能超過750*1489，超過了某些機子會卡，如果素材很長，那就在canvas內(nèi)部做滾動。

61.使用xhr模式加載，preloadjs不會判斷是否緩存，一定會下載，需要自己寫邏輯去判斷，preload可以預(yù)加載dom的資源，但是dom的資源先加載后，preload的資源還會繼續(xù)加載，所以需要用preload預(yù)加載的童鞋，需要確定好先后順序。

這上面很多坑，本人都是花了很長時間才解決的，你們看完后馬上就能解決，可以省下很多很多時間，所以多看看，最好背下來，特別是紅字部分的！

總結(jié)

以上是生活随笔為你收集整理的HTML5不支持createtouch,新手写createjs时容易遇到的坑（持续更新）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。