请问各位大佬， canvas 2d 模式下会出现闪屏怎么处理？

[qq309187341]

如题，使用 canvas 进行一个画布构建，目前的方式是画布中的内容改变就重现触发一次 this.ctx.clearRect(0, 0, width, height)方法，来清楚画布，之后再重现渲染需要的元素。但是这样会出一下一个闪屏问题。而我的需求里面还有针对画布中的某物体进行旋转，移动，缩放等操作。请问如何解决？ 网上有人说双缓冲去处理，有点不太明白。我目前是在微信小程序中使用。

[tyx1703]

关键词：离屏 canvas

主要思路就是在内存中新建一张 canvas 画布，即离屏 canvas ，下一帧在离屏 canvas 中计算渲染，然后再将离屏 canvas 内容全部渲染到主 canvas 上面。

[gausszhou]

我看了一下，大致了解了。

1. 闪屏 是因为不支持 raf
2. 使用双缓冲，来解决 drawcall 的 帧生成时间超过显示屏的每帧间隔的问题
3. 双缓冲的原理是：在另一个 canvas 上下文 ctx2 进行 drawcall ，等 ctx2 的 drawcall 完成后, ctx1 直接使用 drawImage(ctx2, width,height) 渲染 ctx2 的结果 。

ps: drawcall 就是 js 代码中的一系列 canvas 绘图操作 对应在浏览器内部的绘制操作
ps: 可以类比为 多个 document.createElement 和 一个 document.createFragmentElement
ps: 借助这个问题顺带搞懂了 offscreenCanvas 的用法，如果还想要提升性能，我想可以使用 worker + offscreenCanvas

[gausszhou]

@gausszhou 勘误 drawImage(ctx2, width,height) ==> drawImage(canvas2, width, height)

[cheng6563]

双缓冲呗，自绘经典问题了