将ImageData放在一个循环上答案

【问题标题】：putImageData on a loop将ImageData放在一个循环上
【发布时间】：2018-12-01 02:57:16
【问题描述】：

我正在尝试构建一个漂亮的图形图像（动画！），计算屏幕上每个像素的颜色，然后一次显示所有像素。所以，我在循环中使用了 putImageData 函数。

但由于某种原因它不起作用。在屏幕上只能看到最后一次迭代（1-2 秒后）。

我尝试在每次迭代后使用 FillRect，但没有帮助。

<html>
<head>
    <title>Full Screen Canvas Test</title>
    <style>
        html, body {
            overflow: hidden;
            margin: 0;
        }
    </style>
</head>
<body>

    <canvas id="mainCanvas"></canvas>

    <script>
        (function () {
            canvas = document.getElementById('mainCanvas');
            ctx = canvas.getContext("2d");              
            canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
            step = 1;

            function doit() {   
                rx = Math.floor(Math.random()*canvas.width);
                ry = Math.floor(Math.random()*canvas.height);
                gx = Math.floor(Math.random()*canvas.width);
                gy = Math.floor(Math.random()*canvas.height);
                bx = Math.floor(Math.random()*canvas.width);
                by = Math.floor(Math.random()*canvas.height);                                               

                var canvasData = ctx.createImageData(canvas.width, canvas.height);

                for (var i = 0; i < canvas.width; i+=step) {
                    for (var j = 0; j < canvas.height; j+=step) {
                        po = 2;
                        rd = Math.floor(Math.sqrt(Math.pow(rx - i, po)+Math.pow(ry - j, po)));
                        gd = Math.floor(Math.sqrt(Math.pow(gx - i, po)+Math.pow(gy - j, po)));
                        bd = Math.floor(Math.sqrt(Math.pow(bx - i, po)+Math.pow(by - j, po)));
                        maxd = 1400;
                        r = Math.floor((1 - rd/maxd)*255);
                        g = Math.floor((1 - gd/maxd)*255);
                        b = Math.floor((1 - bd/maxd)*255);

                        var index = (i + j * canvas.width) * 4;

                        canvasData.data[index + 0] = r;
                        canvasData.data[index + 1] = g;
                        canvasData.data[index + 2] = b;
                        canvasData.data[index + 3] = 255;


                    }
                }

                ctx.putImageData(canvasData, 0, 0);

            }       

            doit();
            doit();
            doit();
            doit();
            doit();
            doit();
            doit();
            doit();
        })();
    </script>
</body>

【问题讨论】：

当我运行你的代码时，我看到整个画布充满了不同的颜色（比如从红色到绿色的渐变），这不是你所期望的吗？
我希望它完成 8 次，而不是 1 次。
在每次迭代后添加等待间隔 1000 无济于事...
如果你注释掉所有的doit() 方法调用并留下第一个，它会给出不同的结果，然后如果你有两个doit() 调用，你会再次得到不同的结果。所以，它似乎发生了 8 次
是的。但只有doit() 的最后一次迭代是可视化的。编辑：我希望连续看到 8 个不同的图像，但我只能看到最后一个。

标签： javascript html canvas putimagedata

【解决方案1】：

您需要使用setInveral() 多次调用您的doit() 函数，每次调用之间存在时间延迟。您当前方法的问题在于它在一次迭代中运行所有 doit() 结果，然后仅在覆盖您之前的结果时才显示最后一个结果。因此，您需要按顺序显示每个结果。

请参阅下面的工作示例：

<html>

<head>
  <title>Full Screen Canvas Test</title>
  <style>
    html,
    body {
      overflow: hidden;
      margin: 0;
    }
  </style>
</head>

<body>

  <canvas id="mainCanvas"></canvas>

  <script>
    (function() {
      canvas = document.getElementById('mainCanvas');
      ctx = canvas.getContext("2d");
      canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
      step = 1;

      function doit() {
        rx = Math.floor(Math.random() * canvas.width);
        ry = Math.floor(Math.random() * canvas.height);
        gx = Math.floor(Math.random() * canvas.width);
        gy = Math.floor(Math.random() * canvas.height);
        bx = Math.floor(Math.random() * canvas.width);
        by = Math.floor(Math.random() * canvas.height);

        var canvasData = ctx.createImageData(canvas.width, canvas.height);

        for (var i = 0; i < canvas.width; i += step) {
          for (var j = 0; j < canvas.height; j += step) {
            po = 2;
            rd = Math.floor(Math.sqrt(Math.pow(rx - i, po) + Math.pow(ry - j, po)));
            gd = Math.floor(Math.sqrt(Math.pow(gx - i, po) + Math.pow(gy - j, po)));
            bd = Math.floor(Math.sqrt(Math.pow(bx - i, po) + Math.pow(by - j, po)));
            maxd = 1400;
            r = Math.floor((1 - rd / maxd) * 255);
            g = Math.floor((1 - gd / maxd) * 255);
            b = Math.floor((1 - bd / maxd) * 255);

            var index = (i + j * canvas.width) * 4;

            canvasData.data[index + 0] = r;
            canvasData.data[index + 1] = g;
            canvasData.data[index + 2] = b;
            canvasData.data[index + 3] = 255;

          }
        }

        ctx.putImageData(canvasData, 0, 0);
      }
      
      // Use setInterval to display the images sequentially (every 1000 m/s (every second))
      let showImg = setInterval(doit, 1000);
    })();
  </script>
</body>

【讨论】：

哇。由于某种原因，它对我不起作用。需要时间分析。
@RomanNastenko 也许您没有设置足够大的间隔？我使用了1000，所以它每秒（每 1000 m/s）触发doit() 方法
如果我想无休止地运行它怎么办？它对你有用吗？
当我删除if(count < imgAmount-1) 部分（如果）并只留下clearInterval(showImg); - 它不起作用。为什么？
@RomanNastenko 是的，这更容易，给我几分钟时间解决