При рисовании последовательных кадров на холсте HTML5 отображается только последний кадр

Question

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

    drawing(transform(alone, Box, canvasx.width, canvasx.height), false, "00f", canvasx);
    drawing(transform(Lines, Box, canvasx.width, canvasx.height), false, "ff0000", canvasx);

    var date = new Date();
    var curDate = null;

    do {
        curDate = new Date();
    }
    while (curDate - date < 550);

    if (alone.length > 0) {
        canvasx.width = canvasx.width;
    } 

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

Теперь, если я удаляю canvasx.width = canvasx.width;, я все равно получаю то же самое поведение, только очевидно, что в конце я получаю все кадры, нарисованные один над другим.

Очевидно, что это не анимация, поэтому я не могу вызвать рисование в сетевом интервале.

Кто-нибудь знает, почему;

Answer 1

У вас есть для использования setTimeout вместо вашего цикла.

// JavaScript is single thread, and this BLOCKS the re-rendering and display of the canvas
do {
    curDate = new Date();
}
while (curDate - date < 550);

Также я бы предпочел использовать context.clearRect (см. MDC ) вместоЧто касается изменения размера, то нет никакой разницы в производительности.

Что-то вроде этого должно сделать это:

function drawCanvas() {
    if (alone.length > 0) {
        // clear canvas
    } 
    drawing(transform(alone, Box, canvasx.width, canvasx.height), false, "00f", canvasx);
    drawing(transform(Lines, Box, canvasx.width, canvasx.height), false, "ff0000", canvasx);
    setTimeout(drawCanvas, 550);
}

Никогда не пытайтесь эмулировать sleep в JavaScript, вы заблокируете работу всего браузера.что угодно, пока вы sleeping.