EaselJS spritesheet動畫使背景消失

我正在使用EaselJS進行遊戲，而我仍在嘗試這個偉大的圖書館提供的功能。EaselJS spritesheet動畫使背景消失

我可能需要的是Alphamaskfilter類& Spritesheet類。

目前，我有一個這樣的畫布：

<canvas id = 'container3' width = 320px; height = 480px; 
style = 'outline: 2px solid; margin-right: 10px;float:left;'></canvas>

，並在我的劇本，我有畫有藍顏色的矩形：所以現在我有一個藍色320

var ctx3 = document.getElementById('container3').getContext('2d'); 
ctx3.beginPath(); 
ctx3.rect(0,0,320,480); 
ctx3.fillStyle = 'blue'; 
ctx3.fill();

* 480畫布。現在我有一個精靈表動畫就可以了，這裏是精靈和代碼，我寫道： http://i.imgur.com/XumDvic.png

PS：前景幀爲200 * 200僅供參考。

stage = new createjs.Stage(document.getElementById('container3')); 
var test = new Image(); 
test.src = 'trans_blackball.png'; 

test.onload = function(){ 
      var sprite = new createjs.SpriteSheet({ 
       images: [test], 
       frames: {width: 200, height: 200}, 
       animations: { 
        born: [0,3,0] 
       } 
      }); 

      var animation = new createjs.BitmapAnimation(sprite); 
      animation.gotoAndPlay("born"); 
      animation.x = 10; 
      animation.y = 10; 
      animation.currentFrame = 0; 

      stage.addChild(animation); 

      createjs.Ticker.addListener(window); 
      createjs.Ticker.useRAF = true; 
      createjs.Ticker.setFPS(10); 


} 

function tick(){ 
    stage.update(); 
}

好吧，我的問題是：我希望在藍色背景（矩形）的放大黑色圓圈的動畫，但我得到的是先在畫布上是藍色的，但對於某些小型秒後，整個畫布變白了，動畫在白色背景上運行，這是什麼原因，我該如何解決？

這裏有兩點可以幫助：

我與鍍鉻的工作，和我一起F12 &控制檯檢查，畫布的填充樣式依然是藍色的，甚至它出現在精靈動畫開始後白

如果我將畫布背景屬性設置爲藍色而不是繪製藍色矩形，那麼一切都很好！

<canvas id = 'container3' width = 320px; height = 480px; 
style = 'background: blue; outline: 2px solid; margin-right: 
10px;float:left;'></canvas>

，但顯然這不是我想要的......

的問題可以通過不使用天然的畫布矩形，但使用EaselJS的形狀繪製矩形來解決，以及：
```
var shape = new createjs.Shape(); 
shape.graphics.beginFill("#ff0000").drawRect(0, 0, 320, 480); 
stage.addChild(shape); 
```
但我還是想知道爲什麼本地矩形繪製代碼是不工作...

請發表我的英文不好，謝謝閱讀和任何幫助......如果有什麼不清楚的地方，我可以詳細說明..謝謝！

來源

2013-03-27 shole

createjs.Stage.update()在渲染新幀之前將默認清除畫布內容。

其原因是一方面canvas的技術行爲，畫布基本上只是一個像素的圖像，你不能有真正的「層」，並說「我只是想刪除/更新這一個對象」 - 您可以修改框架的扁平像素或刪除所有內容並重新繪製它（這更安全，更容易實現，並且實際上足夠快的性能 - 而且另一方面，一致地使用框架是有意義的就像EaselJS一樣，而不是用框架做一些部分，沒有做一些部分，這會導致最終的混亂。

所以，正確的解決方案是3.

去您可以設置myStage.autoClear = false;防止平臺從autoClear荷蘭國際集團在每一個update()畫布上，但我不認爲這將滿足您的需求在這種情況下。

來源

2013-03-27 10:03:39 olsn

我會推薦使用EaselJS Shape類來製作藍色方塊。如果它是EaselJS顯示列表的一部分，它將與其他內容一起繪製。

javascript var shape = new createjs.Shape(); shape.graphics.beginFill("blue").drawRect(0,0,320,480); stage.addChild(shape);

來源

2013-03-28 19:07:10 Lanny

EaselJS spritesheet動畫使背景消失

回答

相關問題