javascript - 使用 setTimeout 从循环内部重绘 html Canvas 的推荐方法

标签 javascript html animation canvas settimeout

<分区>

我已经研究了很多，主要是在 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>

最佳答案

试试 RequestAnimationFrame!

RequestAnimationFrame 与 setTimeout 一样是异步的，并且比 setTimeout 更高效。

此外，它还提供了动画分组和屏幕外动画的自动停止功能。

您甚至可以使用此技术将其限制到您想要的 FPS:

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

        // your draw() stuff goes here

    }, 1000 / fps);
}

关于javascript - 使用 setTimeout 从循环内部重绘 html Canvas 的推荐方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15751233/

上一篇：javascript - 如何设置链接的动态ID？

下一篇：javascript - 通过单击具有更改图像不透明度的图像来选中复选框

相关文章：

javascript - 是否可以从对象函数内部在 Canvas 上绘制？

javascript - 如何在 Jquery Ajax 表单提交中添加错误处理

jquery - jCarouselLite 在与 Bootstrap 一起使用时不起作用

ios - 使 UIImage 从左到右出现

android - Android SDK 中的 overridePendingTransition 不起作用

javascript - React 中如何制作有焦点或有内容时可以向上移动的 float 标签？

javascript - 在文本字段中发生按键事件后检测输入文本字段的 "value"？

html - 如何将 'ul' 居中？

Android webview html5 视频自动播放不适用于 android 4.0.3

ios - 如何为 UIImageView 比例设置动画但保持其图像不变？