Html5 canvas WebGL在每个设置间隔之间清除

当按顺序调用

gl.drawArrays

时，它会在画布上先前图形的顶部绘制。但是，当我将其放入

setInterval（）

中时，它会在重新绘制之前清除画布

将矩形相互重叠绘制的代码：

for(var i =0; i < 10; i++) {
    setRectangle(gl, Math.random()*100, Math.random()*100, 20, 20);
    gl.drawArrays(gl.TRIANGLES, 0, 6); 
}

下面是包含上述代码的完整示例

我正在制作一个涉及实时操纵大型图像的游戏（如果这有什么不同的话，请使用游戏循环的phaser.js库）。我希望能够只重绘图像所需的部分，而不是每个动画周期重绘整个图像

---

为什么webgl画布像这样清晰？我可以阻止它清除吗？

将第51行更改为

var gl=getWebGLContext（document.getElementById（“canvas”），{preserveDrawingBuffer:true}）

警告：我上一次检查firefox时，打开此选项会导致其速度显著降低
 啊哈！太好了。伙计，谢谢！：）后续问题：为什么
gl.preserveDrawingBuffer=true不工作？不工作是什么意思？如果您的意思是为什么不能在创建它之后在gl上下文中设置它，那是因为它是一个特定于webgl的东西，并且webgl api旨在镜像opengl es api。这也是规范所说的搜索
preserveDrawingBuffer
是的，这是我的问题。感谢链接，这很有帮助。回避了为什么缓冲区保留在for循环中而不是间隔中的问题。。。低层#我不知道封套的第2.2节，当它被清除时。TL；博士，合成后就被清除了这里有一些答案覆盖了同一区域，
interval = setInterval(() => {
    setRectangle(gl, Math.random()*100, Math.random()*100, 20, 20);
    gl.drawArrays(gl.TRIANGLES, 0, 6); 
}, 500);