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

webGL draw in event handler seems to clear the canvas

本文关键字：清除 绘制 程序 webGL 事件处理      更新时间：2023-09-26

这是 webglfundamentals.com 中一个非常轻微的修改介绍性示例。

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

在画布上鼠标向下以绘制一个新矩形。先前绘制的矩形将被清除。为什么？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 初始化上下文会导致鼠标向下矩形绘制在现有矩形的顶部：

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

但我也读到preserveDrawingBuffer的性能很差，它不能很好地解释为什么循环调用和鼠标按下调用的呈现方式不同。

使用 preserveDrawingBuffer: true 

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

详细信息在这里 鼠标点击后 WebGL 绘图失败

相关文章：