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

さて、私の質問は次のとおりです。青色の背景 (rect) に黒い円が拡大するアニメーションを期待していますが、最初はキャンバスが青色ですが、一定の数秒後にキャンバス全体が白くなり、アニメーションが白い背景で実行されています。この理由は何ですか?どうすれば解決できますか?

次の 2 点が役立ちます。

  1. 私はクロムで作業しています.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);

    しかし、ネイティブのrect描画コードが機能しない理由を知りたい...

私の下手な英語をさらけ出してください。読んでくれて、助けてくれてありがとう...状況に不明な点がある場合は、もっと詳しく説明できます..ありがとう!

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あり、キャンバスは基本的に単なるピクセルのイメージです。実際の「レイヤー」を使用して、「この 1 つのオブジェクトを削除/更新したいだけです」と言うことができません。変更するだけです。フレームの平坦化されたピクセルを削除するか、すべてを削除して再描画します (これは、より安全で、達成しやすく、実際にはパフォーマンス面で十分に高速です。一方、EaselJS のようなフレームワークを一貫して使用することは理にかなっています。フレームワークを使用して一部を実行し、フレームワークを使用せずに一部を実行すると、最終的に大きな混乱が発生します。

したがって、正しい解決策は3 を使用することです。

myStage.autoClear = false;ステージが毎回キャンバスを自動クリアしないように設定できupdate()ますが、この場合のニーズには合わないと思います。

于 2013-03-27T10:03:39.690 に答える