使用时输出的呈现方式不同（forloop vs setInterval，requestAnimationFrame）

Question

我遇到问题ForLoop vs（setInterval，requestAnimationFrame） 下面的代码只是在画布上绘制随机矩形 我通过在此复制/粘贴整个代码避免将此问题变大，而是通过演示发布相关代码
问题是当我使用
1时。对于循环绘制50矩形我在屏幕上得到全50矩形，如下所示，但不是forloop
2.如果我使用setInterval或requestAnimation（回调）我得到单个矩形。
在第二种情况下每当一个新的矩形被绘制先前绘制的矩形是清除因此最终的o / pi得到单个矩形，但如果我使用forloop，这不会发生为什么这样？
我用

测试了我的案例

  

ForLoop，setInterval和requestAnimationFrame

使用For循环： 我的代码流是这样的，Demo：

function main() {
 .....
  drawRects();
}
function drawRects() {
for(var i=0;i<50;i++){
  setRectangle(gl, randomInt(100), randomInt(100),randomInt(100), randomInt(100));
  //draw Rectangle
  ....
}}
main();

我得到输出为：

使用requestAnimationFrame /与setInterval相似：
我的代码流是这样的，Demo：

function main() {
 .....
  render();
}
function render(){
    if(rectCount < 50){
        drawRects();
        rectCount++;
    }
    window.requestAnimationFrame(render);
}
function drawRects() {
  setRectangle(gl, randomInt(100), randomInt(100),randomInt(100), randomInt(100));
  //draw Rectangle
  ....
}
main();

Answer 1

这是因为WebGL在合成后清除了画布

如果您不希望WebGL在合成后清除画布，则可以在创建上下文时传入preserveDrawingBuffer: true

var gl = someCanvas.getContext("webgl", { preserveDrawingBuffer: true });

可能会牺牲一些性能。

其他一些Q＆amp; As有更多细节

https://stackoverflow.com/a/33331594/128511

https://stackoverflow.com/a/26790802/128511