как рисовать холст, используя цикл с задержкой?

var context = document.getElementById("canvas").getContext("2d"); 

for(var i = 0; i< savedMove.length; i++){ 
    doSetTimeout(i); 
} 

function doSetTimeout(i) { 
    setInterval(function() { animate(savedMove[i][0], savedMove[i][1]); }, 100); 
} 
function animate(xPos, yPos) { 
    context.fillStyle = "red"; 
    context.fillRect(xPos, yPos, 5, 5); 
}

У меня есть положение x и y внутри 2D-массива (savedMove), и я хочу рисовать с информацией о массиве с задержкой. Но Холст не рисует это. Я продолжаю отлаживать, но я не могу понять проблему.как рисовать холст, используя цикл с задержкой?

источник

2016-01-21 Haroldy

где вы определили 'savedMove' массив? просто проверьте, доступно ли это, прежде чем использовать его в цикле for. Я пробовал ваш код, и когда я определил массив 'savedMove' с фиктивными элементами, он сделал рисование на холсте (но не с задержкой, как объяснил Гавриэль). –

Здесь я пишу цвет красный, но в моем коде функция меняет цвет. И я понимаю, что цвет по умолчанию был белым. Неудивительно, что я не вижу картины ... Спасибо за помощь – Haroldy

Вы устанавливаете таймеры savedMove.length для отметки параллельно каждые 100 миллисекунд. Я почти уверен, что это не то, что вы хотите, хотя трудно догадаться, что это такое. Во-первых я хотел бы изменить setInterval для SetTimeout и заставить их стрелять в разное время, в 100 мс на расстоянии друг от друга:

function doSetTimeout(i) { 
    setTimeout(function() { animate(savedMove[i][0], savedMove[i][1]); }, 100 * i); 
}

Обратите внимание, что это не самый лучший способ сделать это, но, конечно, лучше, чем исходный код.

Затем вы можете отлаживать его, потому что вы могли бы извлечь из видимых холста:

console.log("canvas size:", document.getElementById("canvas").width, document.getElementById("canvas").height); 

function animate(xPos, yPos) { 
    context.fillStyle = "red"; 
    context.fillRect(xPos, yPos, 5, 5); 
    console.log("animate:", xPos, yPos); 
}

источник

2016-01-21 01:25:57 Gavriel

как рисовать холст, используя цикл с задержкой?

ответ

Смежные вопросы