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动画使背景消失

回答

相关问题