为什么是重新绘制而不是叠加？

Question

请问在绘制的时候调了2次drawArrays画了两个点，而在定时器100ms后再次调用drawArrays为什么是清空后画了两个点而不是叠加成4个点？

Answer 1

yancy 2023-07-13 18:46:58

这里利用的是 webgl 的缓冲清除，下一次绘制的时候会将之前的缓冲区内容进行清除，然后再进行绘制。如果不想清除缓冲区，可以这样设置 getContext('webgl', { preserveDrawingBuffer: true }) ，然后再运行，看到的就是不会清除的版本，会保留之前所有绘制过的点

• 泡沫313 #1

  那为什么for循环里可以绘制出多个，是有时间限制清除缓存吗？比如100ms内绘制另一个不会清楚之前的？

• 躁动的胸大肌 #2

  缓存清除时机是啥？一帧一次？

• yancy 回复 泡沫313 #3

  一帧一次

点开查看后面1条评论

Answer 2

嘤嘤怪势力登场 2023-07-26 16:05:42

我查到的是：gl.drawArrays() 方法只会同步绘图，走完了js 主线程后，再次绘图时，就会从头再来。也就说，异步执行的drawArrays() 方法会把画布上的图像都刷掉。

Answer 3

LiGNaiXO 2023-09-05 17:40:22

gl.drawArrays(gl.POINT,0,1)方法和canvas 2d中的ctx.draw()方法不同。

ctx.draw真的像画画一样，一层一层的覆盖图像。

gl.drawArrays方法只会同步绘图，走完了JS主线程后，再次绘图时，就会从头再来。就是说，异步执行的gl.drawArrays方法会把画布上的图像都刷掉。