javascript - 事件处理程序中的 webGL 绘制似乎清除了 Canvas

Question

这是来自 webglfundamentals.com 的一个经过非常轻微修改的介绍性示例.

http://codepen.io/anon/pen/mVYrZd

在 Canvas 上按下鼠标以绘制一个新矩形。先前绘制的矩形被清除。为什么？ for 循环和事件处理程序正在调用完全相同的函数。

相关代码:

// Draw 50 random rectangles in random colors.
// They draw on top of each other, as expected.
for ( var i = 0; i < 50; i += 1 ) {
  drawARandomRectangle( gl );
}

// Draw one rectangle on the canvas in response to a canvas mousedown.
// The buffer seems to be cleared, only a single new rectangle shows.
canvas.addEventListener("mousedown", function( e ){
  drawARandomRectangle( gl );
});

我发现使用 preserveDrawingBuffer 初始化上下文会导致 mousedown 矩形绘制在现有矩形的顶部:

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

但我也读到过 preserveDrawingBuffer 的性能很差，它并不能完全解释为什么循环内调用和 mousedown 调用呈现不同。

Answer 1

使用preserveDrawingBuffer: true

var gl = canvas.getContext( "webgl", { antialias: false, preserveDrawingBuffer: true} )

详情在这里WebGL drawing failure after mouse click