Question

以下是来自webglfundamentals.com的一个非常轻微的重写介绍示例。

画布上的Mousedown绘制一个新的矩形。先前绘制的矩形被清除。为什么？ 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

事件处理程序中的webGL绘图似乎清除了画布

1 个答案: