EaselJS spritesheet анимация делает фон исчезающим

Question

Я работаю над игрой с использованием 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 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(); 
} 

Хорошо, мой вопрос: Я ожидаю, что анимацию расширяющейся черный круг на синем фоне (Rect), но то, что я получил, во-первых, полотно синего цвета, но для определенной мини-второй после , весь холст стал белым, а анимация бежит на белом фоне, в чем причина этого и как я могу его решить?

Вот две точки, которые могут помочь:

1. Я работаю с хромом, и я проверяю с F12 & консоль, FillStyle холста еще голубой даже кажется белым после начала спрайт анимации

2. Если я установил свойство фона холста синим, а не рисую синим прямоугольником на нем, все в порядке!

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

   , но ясно, что это не то, что я хочу ...

3. Проблема может быть решена, а не используя родной холст прямоугольник, но использовать Shape EaselJS, чтобы нарисовать прямоугольник:

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

   Но я все еще хочу знать, почему родной код прямоугольник рисунок не работает ...

Голосуйте за мой плохой английский и спасибо за чтение и любую попытку помочь ... Я могу подробнее рассказать, если в ситуации есть что-то непонятное.

Answer 1

createjs.Stage.update() очистит содержимое холста по умолчанию перед рендерингом нового кадра.

Причина в том, что с одной стороны, техническое поведение canvas, холст - это в основном просто изображение пикселей, у вас не может быть реальных «слоев» и сказать «я просто хочу удалить/обновить этот один объект», - вы просто можете изменить сплющенные пиксели кадра или удалить все и перерисовать его (что более безопасно, проще для достижения и на самом деле достаточно быстро развивается). С другой стороны, имеет смысл последовательно использовать структуру как EaselJS, и не делать некоторые части с каркасом и некоторыми частями без него, это приведет к большому беспорядку в конце.

Таким образом, правильное решение пойти с 3.

Вы можете установить myStage.autoClear = false; для предотвращения стадии из autoClear ИНГ холст на каждом update(), но я не думаю, что это будет отвечать вашим потребностям в этом случае.

Answer 2

Я бы рекомендовал вместо этого использовать класс стилей EaselJS, чтобы сделать вашу синюю коробку. Если он входит в список отображения EaselJS, он будет нарисован другим содержимым.

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