事件处理程序中的webGL绘图似乎清除了画布-Java 学习之路

这是一个来自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调用渲染方式不同 .

1 回答

2
使用 preserveDrawingBuffer: true
```
var gl = canvas.getContext( "webgl", { antialias: false, preserveDrawingBuffer: true} )
```
详情WebGL drawing failure after mouse click
回复于 2024-05-03T05:29:06+08:00

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

1 回答

相关问题