Элемент холста не обновляется

Question

Я пытаюсь визуализировать усиливающий агент, перемещающийся по 2-й сетке. Я закодировал визуализацию с использованием холста, и каждый раз, когда мой агент делает ход, я пытаюсь обновить сетку. Я надеялся увидеть анимацию, но вместо этого я ничего не вижу, пока агент не завершил все эти шаги, и я вижу конечное состояние. Если я перейду с помощью инструментов 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

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

Answer 2

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

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

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