Холст перерисовывает только после окончания цикла

У меня проблема с рисованием на холсте в цикле.

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

Вместо этого пользователь не может видеть изменения, пока не закончится цикл for.

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

Как показать "небольшие изменения" в каждом цикле, а не только в конце?

Мой код ( также здесь: http://janiczek.github.com/heighway- dragon / ссылка теперь содержит что-то еще):

<script type="text/javascript">    

    function sleep (ms)
    {
        var start = new Date().getTime();
        while (new Date().getTime() < start + ms)
            continue;
    };    

    function draw (withalert)
    {
        if (withalert == null) withalert = false;
        var cur_x = 100 - .5;
        var cur_y = 200 - .5;

        length = 3;
        steps = 20;

        c.strokeStyle = "#f00";
        canvas.width = canvas.width;

        for (var count = 0; count < steps; count++)
        {
            sleep(100);
            c.beginPath();
            c.moveTo(cur_x, cur_y);
            cur_x += length;
            c.lineTo(cur_x, cur_y);
            c.stroke();
            if (withalert) alert(count);
        }
    };

</script>

<canvas id=canvas width=300 height=300 style="border: 2px solid #000"></canvas><br>
<input type="submit" value="Without alert" onclick="draw()">
<input type="submit" value="With alert" onclick="draw(true)">

<script type="text/javascript">

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

</script>
4 голоса | спросил Martin Janiczek 24 FriEurope/Moscow2010-12-24T02:55:47+03:00Europe/Moscow12bEurope/MoscowFri, 24 Dec 2010 02:55:47 +0300 2010, 02:55:47

1 ответ


0

Используйте setTimeout вместо своего sleep функция для временного освобождения потока пользовательского интерфейса. Обратите внимание, что setTimeout устанавливает минимальную задержку, передаваемая в нее функция может задерживаться дольше, если что-то выполняется до того, как функция запланирована для вызова. занимает больше времени, чем задержка, переданная в setTimeout.

например. замените ваш цикл for следующим:

var count = 0;
var drawPortion = function() {
    c.beginPath();
    c.moveTo(cur_x, cur_y);
    cur_x += length;
    c.lineTo(cur_x, cur_y);
    c.stroke();
    count++;
    if(count < steps) { setTimeout(drawPortion, 100); }
};
drawPortion();
ответил jball 24 FriEurope/Moscow2010-12-24T03:06:49+03:00Europe/Moscow12bEurope/MoscowFri, 24 Dec 2010 03:06:49 +0300 2010, 03:06:49

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132