Canvas的缓冲区

Canvas的缓冲区

canvas的绘制缓冲区和显示缓冲区理解为两个容器，它们用于存储绘制结果。绘制缓冲区是用于存储渲染管线生成的像素数据，而显示缓冲区是绘制缓冲区最终的存储位置。

绘制缓冲区（Drawing Buffer）:
它是在 canvas 元素上进行绘制的内存区域。当你使用 canvas 绘图 API 绘制图形时，实际上是在绘制缓冲区中进行绘制操作。绘制缓冲区可以看作是一个画板，所有绘制的图形都暂时存储在这个画板上。

显示缓冲区（Display Buffer）:
它是在屏幕上显示图像的内存区域。当绘制操作完成后，绘制缓冲区的内容一般会被复制到显示缓冲区中，并在屏幕上进行显示。这个过程称为双缓冲技术，它可以避免图像闪烁和可见的绘制过程。

1、缓冲区的交换时机

绘制操作完成，是指所有的绘制指令已经被发送到绘图设备（如 GPU）进行处理，并且绘制缓冲区中的图像已经被更新。

在传统的 canvas 绘图中，绘制操作是即时执行的，意味着一旦调用绘图 API 绘制图形，绘制指令就会立即发送到绘图设备进行处理，然后绘制缓冲区的内容会被复制到显示缓冲区并进行显示。这意味着绘制操作几乎是即刻完成的。

在WebGL中就是:

renderer.render(scene, camera)

如果希望连续执行多个绘制操作，可以使用循环或递归来控制绘制指令的发送。可以在每次绘制操作之间添加适当的延时或者使用动画循环函数（如 requestAnimationFrame）来实现绘制的间隔和流畅性。

2、缓冲区的交换方式

阻止浏览器清除Drawing Buffer,直到手动清除或覆盖: preserveDrawingBuffer。

preserveDrawingBuffer 为 true的时候:

• 从 Drawing Buffer 复制到 Display Buffer
• Drawing Buffer 不会主动清空,

preserveDrawingBuffer 为 false的时候:

• 交换双缓冲，比较快。