2

我已经研究了很多，主要是在 SO 中，关于setTimeout“不阻塞”，因此不适合在 for 循环中使用，因为循环继续进行，而函数调用继续建立。

我有一个 HTML 文件，其中记录了图像处理算法，所以我想以“人类可读”的速度显示活动像素“行走”。我尝试但不起作用的实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>

<body onload="run();">

    <canvas id="Canvas" width=501 height=601></canvas>

    <script>

        function run() {
            reevaluate();
        };

        var fixedcenteri;
        var fixedcenterj;



        function reevaluate() {

            var altura_imagem = 50;
            var largura_imagem = 40;

            for (var i = 0; i < altura_imagem; i++) {
                for (var j = 0; j < largura_imagem; j++) {

                    fixedcenteri = i;
                    fixedcenterj = j;

                    setTimeout(draw, 100);


                    // if I uncomment this I can see what I want, but...
                    // alert(i+j);
                };
            };
        };


        function draw () {
            var elem = document.getElementById('Canvas');
            var cx = elem.getContext('2d');

            w = elem.width;
            h = elem.height;

            cx.fillStyle = "white";
            cx.fillRect(0,0,w,h);

            cx.fillStyle = 'blue';
            cx.fillRect(fixedcenteri, fixedcenterj, 10, 10);
        }

    </script>
</body>
</html>
4

3 回答 3

5

试试 RequestAnimationFrame！

RequestAnimationFrame 和 setTimeout 一样是异步的，比 setTimeout 更高效。

此外，它还为离屏动画提供动画分组和自动停止功能。

您甚至可以使用以下技术将其限制为所需的 FPS：

var fps = 15;
function draw() {
    setTimeout(function() {
        requestAnimationFrame(draw);

        // your draw() stuff goes here

    }, 1000 / fps);
}
于 2013-04-01T21:06:32.040 回答
2

最简单的实现是将所有绘制命令存储在一个数组中，然后使用setTimeout在绘制命令之间等待来处理该数组。

这是一个简单的例子-> http://jsfiddle.net/K4D84/

//in your initial loop instead of draw
drawCommands.push({i: i, j: j});

然后...

function slowDraw(index) {
    index = index || 0;

    var drawCommand = drawCommands[index];

    if (drawCommand) {
        fixedcenteri = drawCommand.i;
        fixedcenterj = drawCommand.j;
        setTimeout(function () {
            draw();
            slowDraw(++index);
        }, 100);
    }    
}
于 2013-04-01T20:47:31.977 回答
0

我认为这可以满足您的需求。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>

<body onload="draw();">

    <canvas id="Canvas" width=501 height=601></canvas>

    <script>

        var fixedcenteri = 0;
        var fixedcenterj = 0;

        function draw () {
            var elem = document.getElementById('Canvas');
            var cx = elem.getContext('2d');

            w = elem.width;
            h = elem.height;

            cx.fillStyle = "white";
            cx.fillRect(0,0,w,h);

            cx.fillStyle = 'blue';
            cx.fillRect(fixedcenteri, fixedcenterj, 10, 10);

            if(fixedcenteri < 50) {
                if(fixedcenterj < 40) {
                    fixedcenterj++;
                } else {
                    fixedcenterj = 0;
                    fixedcenteri++;
                }
                setTimeout(draw, 100);
            }
        }

</script>

于 2013-04-01T20:48:15.333 回答