使用时输出呈现不同（for loop vs setInterval,requestAnimationFrame）

Question

我遇到了 ForLoop 与 (setInterval,requestAnimationFrame) 的问题下面的代码简单地在 canvas.
上绘制随机矩形我避免通过 Copy/pasting 此处的整个代码使这个问题变大，而是我将 post 相关代码与演示
问题是当我使用
1 时。对于绘制 50 个矩形的循环，我在屏幕上得到了所有 50 个矩形，如下所示，但是我使用 setInterval 或 requestAnimation(callback) 而不是 forloop
2.if 我得到了单个矩形。
在第二种情况每当绘制一个新的矩形时，以前绘制的矩形都是清晰的，所以最终 o/p 我得到的是单个矩形，但是如果我使用 forloop，这不会发生为什么会这样？
我用

测试了我的案例

ForLoop,setInterval and 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 在合成后清除了 canvas

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

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

可能会牺牲一些性能。

其他一些更详细的问答

使用时输出呈现不同（for loop vs setInterval,requestAnimationFrame）

Output is Rendered differently when using( forloop vs setInterval,requestAnimationFrame)

javascript

webgl

html5-canvas