OffscreenCanvas 怎样把 Worker 绘制结果显示到主线程

把绘制工作放进 Web Worker 后，主线程仍然需要把画面显示出来。这个问题的关键不是把像素数组来回复制，而是区分两次所有权转移：先把 HTMLCanvasElement 的绘制控制权转成 OffscreenCanvas，再把 Worker 生成的 ImageBitmap 交给主线程消费。

下面的示例只围绕 2D 画布和 bitmaprenderer 展开。它是结构说明用的最小写法，真正接入项目时还要结合浏览器能力检测和你的帧率策略。

先保留一个负责显示的主线程画布

主线程保留的不是绘制上下文，而是最终呈现结果的出口。给它取到 bitmaprenderer 上下文后，后面可以用 transferFromImageBitmap() 接收 Worker 送回来的当前帧。

const output = document.querySelector('#output');
// bitmaprenderer 只负责接收 ImageBitmap，不在主线程重复绘制。
const display = output.getContext('bitmaprenderer');
if (!display) {
  throw new Error('当前环境没有 bitmaprenderer 上下文');
}

const worker = new Worker('./paint-worker.js', { type: 'module' });
const offscreen = output.transferControlToOffscreen();
// OffscreenCanvas 是 transferable，必须放进第二个参数完成所有权交接。
worker.postMessage({ canvas: offscreen, width: output.width, height: output.height }, [offscreen]);

调用 transferControlToOffscreen() 后，原来的 HTMLCanvasElement 不能再在主线程上取得普通绘制上下文。这里的 transferable 列表很重要：它表达的是“把对象本身交给 Worker”，不是复制一份同样的画布。

Worker 中绘制，再把当前帧变成 ImageBitmap

Worker 收到 OffscreenCanvas 后，可以取得 2D 上下文。绘制结束时调用 transferToImageBitmap()，得到当前内容对应的 ImageBitmap。MDN 对这个方法的说明是：它会返回最近一次绘制的图像，并为后续绘制准备新的空白图像。

self.onmessage = (event) => {
  const { canvas, width, height } = event.data;
  // Worker 独占 OffscreenCanvas，主线程不再直接触碰它。
  const context = canvas.getContext('2d');
  if (!context) {
    self.postMessage({ type: 'error', message: '无法创建 2D 上下文' });
    return;
  }

  canvas.width = width;
  canvas.height = height;
  context.fillStyle = '#172033';
  context.fillRect(0, 0, width, height);
  context.fillStyle = '#72e6c2';
  context.beginPath();
  context.arc(width / 2, height / 2, Math.min(width, height) / 4, 0, Math.PI * 2);
  context.fill();

  // ImageBitmap 也会被转移，发布后不要在 Worker 中继续复用同一个对象。
  const frame = canvas.transferToImageBitmap();
  self.postMessage({ type: 'frame', frame }, [frame]);
};

这一步返回的是帧对象，不是一个可以同时被两边持有的共享引用。若主线程采用 transferFromImageBitmap() 消费它，ImageBitmap 的所有权就进入显示画布；不要把同一个对象再传给另一个消费者。

主线程消费 ImageBitmap 并处理失败分支

主线程收到消息后直接交给 bitmaprenderer。如果你的项目需要同时给多个画布显示同一帧，就要重新设计生产和消费关系，不能假定一个已转移的 ImageBitmap 能被无限复用。

worker.addEventListener('message', (event) => {
  const message = event.data;
  if (message.type === 'error') {
    // 将 Worker 的初始化错误转成页面层可处理的状态。
    console.error(message.message);
    return;
  }
  if (message.type !== 'frame') return;

  // transferFromImageBitmap 会消费 frame，显示后不能再次发送同一个对象。
  display.transferFromImageBitmap(message.frame);
});

如果浏览器不支持 transferControlToOffscreen、OffscreenCanvas 或 bitmaprenderer，可以退回主线程直接绘制，或让 Worker 返回可序列化的数据再由主线程绘制。降级方案的目标是保持功能可用，不要为了强行使用 OffscreenCanvas 而忽略兼容性。

最容易踩到的三个边界

• 控制权只能转一次：已经转移控制权的 HTMLCanvasElement 不要再调用普通 getContext()。
• 显示方法会消费帧：transferFromImageBitmap() 接收后，原 ImageBitmap 不再是另一个 API 的备用输入。
• 尺寸和生命周期要由应用管理：调整画布尺寸会影响后续绘制；Worker 不再需要时要调用 terminate()，并清理页面侧的消息监听。

相关问题

OffscreenCanvas 是复制画布吗？

不是。把 OffscreenCanvas 放入 transferable 列表后，交接的是控制权。主线程和 Worker 不应把它当作两个独立副本。

为什么不用 postMessage 直接传 canvas？

普通对象消息不会自动复制出可用的画布控制权；需要先调用 transferControlToOffscreen()，再在 transferable 列表中显式转移。

什么时候可以不用 ImageBitmap？

如果只需要把 OffscreenCanvas 内容复制到另一个画布，也可以考虑在目标上下文使用 drawImage()。本文选择 ImageBitmap，是为了清晰展示 Worker 产出帧、主线程消费帧的交接契约。