0

我正在使用 EaselJS 开发一款游戏，我仍在尝试这个很棒的库提供的功能。

我可能需要的是 Alphamaskfilter 类和 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 仅供参考。

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

好的，我的问题是：我希望在蓝色背景（矩形）上放大黑色圆圈的动画，但我得到的是首先画布是蓝色的，但是在某个微秒之后，整个画布变成了白色，并且动画在白色背景上运行，这是什么原因，我该如何解决？

这里有两点可能会有所帮助：

  1. 我正在使用 chrome，我使用 F12 和控制台进行检查，画布的 fillStyle 仍然是蓝色，即使在精灵动画开始后它显示为白色

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

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

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

  3. 该问题也可以通过不使用本机画布矩形而是使用 EaselJS 的 Shape 来绘制矩形来解决：

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

    但我仍然想知道为什么原生矩形绘图代码不起作用......

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

4

2 回答 2

0

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

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

于 2013-03-28T19:07:10.100 回答
0

createjs.Stage.update()在渲染新框架之前，默认情况下会清除画布内容。

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

因此，正确的解决方案是选择3。

您可以设置myStage.autoClear = false;以防止 Stage自动清除每个上的画布，update()但我认为这在这种情况下不适合您的需求。

于 2013-03-27T10:03:39.690 回答