Question

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

我需要的是Alphamaskfilter class＆amp; Spritesheet类。

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

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

在我的剧本中，我画了一个蓝色的矩形：

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

所以现在我有一个蓝色320 * 480画布。现在我有一张精灵表来动画，这是我写的精灵和代码： http://i.imgur.com/XumDvic.png

PS：精灵帧是200 * 200 FYI。

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();
}

好吧，我的问题是：我希望在蓝色背景（矩形）上有一个放大的黑色圆圈的动画，但我得到的是首先画布是蓝色的，但对于某个迷你秒后，整个画布变成白色，动画在白色背景上运行，这是什么原因以及如何解决？

以下两点可能有所帮助：

我正在使用chrome，我查看了F12＆amp;控制台，画布的fillStyle仍为蓝色，即使它在精灵动画开始后显示为白色

如果我将画布背景属性设置为蓝色而不是在其上绘制蓝色矩形，一切都很好!!

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

但显然这不是我想要的......

问题也可以通过不使用原生canvas rect来解决，但使用EaselJS的Shape绘制矩形：
```
var shape = new createjs.Shape();
shape.graphics.beginFill("#ff0000").drawRect(0, 0, 320, 480);
stage.addChild(shape);
```
但我仍然想知道为什么原生的rect绘图代码不起作用......

请露出我糟糕的英语，感谢阅读和任何帮助的尝试...如果情况有任何不明确的话，我可以详细说明......谢谢！

Answer 1

在呈现新帧之前，

createjs.Stage.update()将默认清除画布内容。

原因一方面是canvas的技术行为，画布基本上只是一个像素的图像，你不能拥有真正的'层'并说“我只是想删除/更新这个一个对象“ - 你可以修改框架的扁平像素或删除所有内容并重新绘制（更安全，更容易实现，实际上足够快的性能 - 并且另一方面，使用一致是有意义的像EaselJS这样的框架，没有用框架做一些部分，有些部分没用它，这最终会导致一团糟。

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

您可以设置myStage.autoClear = false;以阻止舞台在每个update()上autoClear画布，但在这种情况下，我认为这不符合您的需求。

Answer 2

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

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

EaselJS spritesheet动画使背景消失

2 个答案: