Анимационные объект внутри холста

Question

jsfiddle: http://jsfiddle.net/Z2YSt/173/

код:

function createShipMissil(x, y, imgw, imgh) { 
      MissileCtx.save(); 
      MissileCtx.clearRect(0, 0, imgw, imgh); 
      MissileCtx.fillStyle = "rgba(0,200,0,1)"; 
      MissileCtx.fillRect(x, y, imgw, imgh); 
      MissileCtx.restore(); 
      y -= 1; 
      setTimeout(function() { createShipMissil(x, y, imgw, imgh); }, 30); 

     } 

Моя проблема заключается в том, что, когда линия нарисована, она выглядит непрерывным. Как я могу изменить это, чтобы он выглядел как движущийся прямоугольник?

Answer 1

Попробуйте вместо этого:

MissileCtx.clearRect(x, y, 1, 30); 

Demo

Answer 2

В общем рисовании только на холсте ADDS новая графика - для создания анимации вам необходимо стереть фон в каждом кадре. частности, вы должны иметь функцию отрисовки, которая вызывается несколько раз, которые:

1. Очищает холст (нарисовать большой цвет фона прямоугольник или любую Заставку вы хотите)
2. Тогда втягивают все объекты, которые двигаются.

Использование фиксированного периода времени (30 мс, как и вы) имеет множество проблем - после того, как вы получите это, посмотрите на переполнение стека, чтобы выяснить, как совместить эту частоту кадров с циклом перерисовывания браузеров.