OffscreenCanvas

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

构造函数

OffscreenCanvas()

OffscreenCanvas构造函数。创建一个新的OffscreenCanvas对象。

属性

OffscreenCanvas.height

offscreen canvas对象的高度。

OffscreenCanvas.width

offscreen canvas对象的宽度。

方法

OffscreenCanvas.getContext()

为offscreen canvas对象返回一个渲染画布。

OffscreenCanvas.toBlob()

创建一个代表canvas中的图像的Blob对象。

OffscreenCanvas.transferToImageBitmap()

从OffscreenCanvas最近渲染的图像创建一个 ImageBitmap 对象。

例子

同步显示OffscreenCanvas中的帧

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

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

提供两个 <canvas> 元素

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

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

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.transferImageBitmap(bitmapOne);
// ... some more drawing for the second canvas using the gl context ...
// Commit rendering to the second canvas
var bitmapTwo = offscreen.transferToImageBitmap();
two.transferImageBitmap(bitmapTwo);

 异步显示OffscreenCanvas生成的帧

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

为了让帧可见，你可以在RenderingContext上调用commit()，然后这些帧会被推回原始的<canvas>元素。

请注意，在Firefox中，此API目前仅针对WebGL context (WebGLRenderingContext.commit())。web work中对Canvas 2D API 的支持， 参照bug 801176。

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();
};

规范

浏览器兼容性

[1] 该特性需要在偏好设置里开启。在关于 -> 设置里，将gfx.offscreencanvas.enabled 选项设置为true。

另请参见

• WebGL Off the Main Thread – Mozilla Hacks
• CanvasRenderingContext2D
• ImageBitmap
• ImageBitmapRenderingContext
• HTMLCanvasElement.transferControlToOffscreen()
• WebGLRenderingContext.commit()