Gauss Zhou

# 离屏渲染

OffscreenCanvas 提供了一个可以脱离屏幕渲染的 canvas 对象。它在窗口环境和 web worker 环境均有效。

# 双缓冲渲染

使用双缓冲解决移动端 Canvas闪屏的问题

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

# 多线程渲染

由于可以在 worker 使用 canvas 对象，这意味着我们可以在将复杂的运算任务分配到多个 worker 中。

Transfer Demo 运行流程大致如下：

  1. 主线程启动 Worker 线程，并请求初始化；
  2. Worker 线程创建 OffscreenCanvas；
  3. Worker 线程获取 OffscreenCanvas 的 WebGL Context 并进行绘制；
  4. Worker 线程获取 OffscreenCanvas 的缓冲区（ImageBitmap），然后 Transfer 回主线程；
  5. 主线程将 Worker 线程回传的缓冲区分别绘制在两个不同的 Canvas 上，一个 Canvas 使用 CanvasRenderingContext2D，一个 Canvas 使用 ImageBitmapRenderingContext；
  6. 3 ~ 5 重复运行；

双缓冲渲染
多线程渲染