Animation EaselJS spritesheet动画使背景消失

我正在使用EaselJS开发一个游戏，我还在尝试这个伟大的库提供的功能

我可能需要的是Alphamaskfilter类和Spritesheet类

目前，我有这样一个画布：

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

现在我有了一块320*480的蓝色画布。现在我有了一张精灵表来制作动画， 这是我写的精灵和代码：

附言：雪碧框架为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();
}

好的，我的问题是：我希望在蓝色背景（rect）上有一个放大的黑色圆圈的动画，但我得到的是首先画布是蓝色的，但在一小秒之后，整个画布变成白色，动画在白色背景上运行，这是什么原因，我如何解决它？

以下两点可能会有所帮助：

我正在使用chrome，我使用F12&console进行检查，画布的填充样式仍然是蓝色的，即使在精灵动画开始后显示为白色

如果我将canvas background属性设置为蓝色，而不是在其上绘制蓝色矩形，那么一切都很好

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

但我还是想知道为什么原生的rect绘图代码不起作用

---

请说出我的英语不好，谢谢你的阅读和任何帮助……如果情况不清楚，我可以详细说明……谢谢

createjs.Stage.update（）

将在渲染新帧之前默认清除画布内容

原因一方面是画布的技术行为，画布基本上只是像素的图像，你不能有真正的“层”并说“我只想删除/更新这一个对象”-你只需要修改帧的展平像素或删除所有内容并重新绘制它（这更安全、更容易实现，而且实际上速度足够快。另一方面，一致使用像EaselJS这样的框架是有意义的，并且不使用框架完成某些部分，而不使用框架完成某些部分，这最终会导致一团混乱

因此，正确的解决方案是使用3。

---

您可以设置

myStage.autoClear=false；

以防止该阶段在每次

update（）时都在画布上移动

但我认为在这种情况下，这不适合您的需要。

我建议使用EaselJS Shape类来制作蓝框。如果它是EaselJS显示列表的一部分，它将与其他内容一起绘制

javascript
var shape=new createjs.shape（）；
shape.graphics.Beginll（“蓝色”）.drawRect（0,0320480）；
阶段。添加儿童（形状）；

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

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