Элемент Canvas не обновляется

Question

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

Моя реализация выглядит следующим образом: одна функция gridWorld() вызывается один раз для создания нового объекта.и executeAction звонил каждый раз, когда я хочу нарисовать.Как показано, я использовал ctx.save() и ctx.restore(), но это всего лишь попытка решить эту проблему, и, похоже, ничего не изменилось.

Спасибо

var execute gridWorld = function(action) {
   var canvas = document.getElementById("grid");
   this.ctx = canvas.getContext("2d");

   this.executeAction = function(action) { 
      this.ctx.save()
      // ... Do reinforcement learning stuff
      // For every cell in grid, do:
         this.ctx.fillStyle = "rgb(244,0,0)"
         this.ctx.fillRect(positionX, poisitonY, 10,10)

      this.ctx.restore();
  }
}

Answer 1

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

Live Demo

Если я сделал что-то подобное, например

for(x = 0; x < 256; x++){
    player.x = x;
    ctx.fillStyle = "#000";
    ctx.fillRect(0,0,256,256);
    ctx.fillStyle = "#fff";
    ctx.fillRect(player.x,player.y,4,4);
}

Вы будете когда-либо видеть игрока на конце доски каждый раз, когда вызывается эта функция, и вы не увидите никакой анимации между ними, потому что цикл выполняется слишком быстро.Вот почему в моем живом демо я делаю это небольшими шагами и вызываю отрисовку каждые 15 миллисекунд, чтобы у вас была возможность реально увидеть, что ставится на холст.

Answer 2

Даже если выполнение кода занимает много времени, браузер не будет обновлять отображение, пока в коде не произойдет фактический разрыв. Используйте setTimeout() для прерывания выполнения кода всякий раз, когда вы хотите обновить холст.