4

ループでキャンバスに描画する際に問題があります。

私が達成したいのは、各ループでスクリプトが数ミリ秒待機してからキャンバスに描画し、ユーザーが実際に変更を確認してからループが繰り返されることです。

代わりに、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

1 に答える 1

4

setTimeout関数の代わりに使用sleepして、UI スレッドを一時的に解放します。最小遅延を設定することに注意してください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();
于 2010-12-24T00:06:49.897 に答える