OffscreenCanvas

定义

OffscreenCanvas是一个由浏览器提供的绘图接口，用于描述一块可以在屏幕之外进行渲染的画布。它提供与HTML画布元素类似的绘制能力，但对象本身不直接依附于页面中的文档对象模型(DOM)，也不必出现在可视区域内^[1]。

该接口既可在主线程使用，也可在Web Worker环境下使用，因此渲染操作能够脱离页面的主执行线程运行。它是一个可转移对象，可以在线程之间转移控制权，并配套提供获取绘图上下文、导出图像数据等方法^[1]。

原理

传统画布的绘制、动画与用户交互通常发生在网页应用的主执行线程上，与画布相关的计算量会对整体性能产生明显影响。OffscreenCanvas把画布从页面上分离出来，使其不与文档对象模型同步，渲染过程因而独立于页面结构^[2]。

使用方式主要有两类。一种是在主线程或工作线程中调用画布元素的$transferControlToOffscreen()$方法，得到一个离屏画布对象，再把它转移给Worker；这种方式下对离屏画布的操作会自动反映到原画布上。另一种是直接构造离屏画布，用$getContext()$取得绘图上下文，绘制完成后通过$transferToImageBitmap()$把最新一帧转为位图对象，再交给可见画布的位图渲染上下文显示^[1]。

离屏画布可用的上下文类型包括二维、WebGL、WebGL2、WebGPU以及位图渲染等标识，若标识不受支持或画布已设定为其他上下文模式，则返回空值^[3]。其二维上下文与常规二维上下文用法基本一致，区别在于不支持聚焦环一类的界面功能，且其画布属性指向的是离屏画布对象^[4]。

发展历程

OffscreenCanvas最初由谷歌(Google)团队在Chromium项目中推动实现。Chrome 69于2018年9月4日发布，成为首个默认支持该接口的浏览器版本，当时同时覆盖二维与WebGL上下文，用于提升多核系统的性能与网页应用的并行能力^[5]。

此后其他浏览器陆续跟进。火狐(Firefox)在105版本、发布于2022年9月20日加入支持；Safari在16.4版本、发布于2023年3月27日加入支持^[5]。到2023年3月，该接口已在各主流浏览器中可用，相关特性被标记为广泛可用^[1]。

该接口随后被纳入互操作性测试项目，并在2025年9月27日被列为已广泛可用特性^[5]。

应用

该接口最直接的用途是把画布渲染放入Worker，从而释放主线程资源。当主线程因其他任务被占用时，普通画布的动画会停滞，而运行在Worker中的离屏画布动画仍可保持流畅^[2]。

在图形库方面，由于接口与常规画布元素大体兼容，它可以作为渐进增强手段与三维渲染库配合使用。以Three.js为例，可在渲染器构造函数中指定画布对象，并在支持时传入离屏画布；但该库期望画布具备样式宽高属性，而离屏画布与文档对象模型完全分离，不具备此类属性，需要开发者自行提供相应值^[2]。

图像处理也是常见场景，例如把渐变色的计算放入Worker执行，再由主线程取用结果的像素数据^[2]。得益于线程分离，向Worker提供画布渲染上下文可以提高网页应用中的并行性，并更好地利用多核系统^[2]。

局限

离屏画布与文档对象模型分离，因此不具备元素级别的样式、布局与交互能力，需要与页面样式相关的逻辑时须由开发者额外补充^[2]。二维上下文同样不支持聚焦环一类依赖界面的方法^[4]。

在Worker中使用时，一些与文档对象模型相关的接口无法直接调用，因此若需使用纹理等较高级的图形功能，可能需要额外的变通方案^[2]。

通过$transferToImageBitmap()$得到的位图对象引用底层图形资源，若数量过多会影响应用健壮性，使用后应将其交给会消费它的接口，或显式关闭；仅删除脚本引用不会立即释放资源，要等到垃圾回收时才回收^[6]。此外，若画布已转移到其他上下文范围，或尚未设定上下文模式，调用该导出方法会抛出异常^[6]。

参见

• Canvas API —— OffscreenCanvas 所属的绘图接口体系，提供在网页上绘制图形的能力。

• Web Worker —— 该接口在其中运行的后台线程环境，是发挥其并行优势的关键。

• 文档对象模型 —— 该接口通过解耦所脱离的页面结构模型。

• WebGL —— 离屏画布可创建的上下文类型之一，用于三维图形渲染。

• ImageBitmap —— 离屏画布导出渲染结果时生成的对象类型。

• 级联样式表 —— 与文档对象模型绑定，因而无法直接作用于离屏画布。