--- title: OffscreenCanvas slug: Web/API/OffscreenCanvas tags: - API - Canvas - Experimental - Interface - Reference browser-compat: api.OffscreenCanvas translation_of: Web/API/OffscreenCanvas ---
{{APIRef("Canvas API")}} {{SeeCompatTable}}

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

构造函数

{{domxref("OffscreenCanvas.OffscreenCanvas", "OffscreenCanvas()")}}
OffscreenCanvas构造函数。创建一个新的OffscreenCanvas对象。

属性

{{domxref("OffscreenCanvas.height")}}
offscreen canvas对象的高度。
{{domxref("OffscreenCanvas.width")}}
offscreen canvas对象的宽度。

方法

{{domxref("OffscreenCanvas.getContext()")}}
为offscreen canvas对象返回一个渲染画布。
{{domxref("OffscreenCanvas.toBlob()")}}
创建一个代表canvas中的图像的{{domxref("Blob")}}对象。
{{domxref("OffscreenCanvas.transferToImageBitmap()")}}
从OffscreenCanvas最近渲染的图像创建一个 {{domxref("ImageBitmap")}} 对象。

例子

同步显示OffscreenCanvas中的帧

一种方式是使用OffscreenCanvas API，也就是用已经包含OffscreenCanvas对象的{{domxref("RenderingContext")}} 来生成新的帧。 每次一个新的帧在画布中完成渲染，{{domxref("OffscreenCanvas.transferToImageBitmap", "transferToImageBitmap()")}} 方法都会被调用来保存最近渲染的图像。该方法返回一个{{domxref("ImageBitmap")}}对象，该对象可以被用在各种Web APIs中，也可以用在下一个canvas中，并且不需要转换备份。

为了显示ImageBitmap，你可以用{{domxref("ImageBitmapRenderingContext")}}上下文，通过一个canvas（可见的）元素调用canvas.getContext("bitmaprenderer")方法来创建它。该上下文只提供用ImageBitmap替换canvas的内容的功能。调用{{domxref("ImageBitmapRenderingContext.transferFromImageBitmap()")}} 以前的渲染结果并且通过OffscreenCanvas保存ImageBitmap，会在canvas里显示ImageBitmap并且转换其所有权到canvas。 一个单独的OffscreenCanvas可以将帧转换到任意数量的其他ImageBitmapRenderingContext对象。

提供两个 {{HTMLElement("canvas")}} 元素

<canvas id="one"></canvas>
<canvas id="two"></canvas>

下面的代码会用OffscreenCanvas提供渲染结果，就像上面描述的一样。

var one = document.getElementById("one").getContext("bitmaprenderer");
var two = document.getElementById("two").getContext("bitmaprenderer");

var offscreen = new OffscreenCanvas(256, 256);
var gl = offscreen.getContext('webgl');

// ... some drawing for the first canvas using the gl context ...

// Commit rendering to the first canvas
var bitmapOne = offscreen.transferToImageBitmap();
one.transferFromImageBitmap(bitmapOne);

// ... some more drawing for the second canvas using the gl context ...

// Commit rendering to the second canvas
var bitmapTwo = offscreen.transferToImageBitmap();
two.transferFromImageBitmap(bitmapTwo);

 异步显示OffscreenCanvas生成的帧

另一种使用 OffscreenCanvas API的方式, 是在一个{{HTMLElement("canvas")}}元素上调用{{domxref("HTMLCanvasElement.transferControlToOffscreen", "transferControlToOffscreen()")}}， 也可以在worker或主线程,上调用，这将从主线程的{{domxref("HTMLCanvasElement")}}对象返回一个OffscreenCanvas对象。调用{{domxref("OffscreenCanvas.getContext", "getContext()")}} 会从这个OffscreenCanvas获取一个RenderingContext 。

main.js (主线程代码):

var htmlCanvas = document.getElementById("canvas");
var offscreen = htmlCanvas.transferControlToOffscreen();

var worker = new Worker("offscreencanvas.js");
worker.postMessage({canvas: offscreen}, [offscreen]);

offscreencanvas.js (web work代码):

onmessage = function(evt) {
  var canvas = evt.data.canvas.
  var gl = canvas.getContext("webgl");

  // ... some drawing using the gl context ...

  // Push frames back to the original HTMLCanvasElement
  gl.commit();
};

也可以在 worker 中使用 requestAnimationFrame

onmessage = function(evt) {
  const canvas = evt.data.canvas;
  const gl = canvas.getContext("webgl");

  function render(time) {
    // ... some drawing using the gl context ...
    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
};

规范

{{Specifications}}

浏览器兼容性

{{Compat("api.OffscreenCanvas")}}

另请参见