OffscreenCanvas

这是 实验性技术
检查 浏览器兼容性表格 在生产中使用这之前。

OffscreenCanvas interface provides a canvas that can be rendered off screen. It is available in both the window and worker contexts.

构造函数

OffscreenCanvas()
OffscreenCanvas constructor. Creates a new OffscreenCanvas 对象。

特性

OffscreenCanvas.height
The height of the offscreen canvas.
OffscreenCanvas.width
The width of the offscreen canvas.

方法

OffscreenCanvas.getContext()
Returns a rendering context for the offscreen canvas.
OffscreenCanvas.convertToBlob()
创建 Blob object representing the image contained in the canvas.
OffscreenCanvas.transferToImageBitmap()
创建 ImageBitmap object from the most recently rendered image of the OffscreenCanvas .

范例

Synchronous display of frames produced by an OffscreenCanvas

One way to use the OffscreenCanvas API, is to use a RenderingContext that has been obtained from an OffscreenCanvas object to generate new frames. Once a new frame has finished rendering in this context,  the transferToImageBitmap() method can be called to save the most recent rendered image. This method returns an ImageBitmap object, which can be used in a variety of Web APIs and also in a second canvas without creating a transfer copy.

To display the ImageBitmap , you can use a ImageBitmapRenderingContext context, which can be created by calling canvas.getContext("bitmaprenderer") on a (visible) canvas element. This context only provides functionality to replace the canvas's contents with the given ImageBitmap . A call to ImageBitmapRenderingContext.transferFromImageBitmap() with the previously rendered and saved ImageBitmap from the OffscreenCanvas, will display the ImageBitmap on the canvas and transfer its ownership to the canvas. A single OffscreenCanvas may transfer frames into an arbitrary number of other ImageBitmapRenderingContext 对象。

Given these two <canvas> elements

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

the following code will provide the rendering using an OffscreenCanvas as described above.

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

Asynchronous display of frames produced by an OffscreenCanvas

Another way to use the OffscreenCanvas API, is to call transferControlToOffscreen() on a <canvas> element, either on a worker or the main thread, which will return an OffscreenCanvas object from an HTMLCanvasElement object from the main thread. Calling getContext() will then obtain a RenderingContext from that OffscreenCanvas .

main.js (main thread code):

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

offscreencanvas.js (worker code):

onmessage = function(evt) {
  var canvas = evt.data.canvas;
  var gl = canvas.getContext("webgl");
  // ... some drawing using the gl context ...
};
					

You can also use requestAnimationFrame in workers

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

规范

规范 状态 Comment
HTML Living Standard
The definition of 'OffscreenCanvas' in that specification.
实时标准

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
OffscreenCanvas
Chrome 69 Edge ≤79 Firefox 部分支持 44
注意事项 Disabled
部分支持 44
注意事项 Disabled
bug 1390089 .
Disabled From version 44: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
IE 不支持 No Opera 56 Safari 不支持 No WebView Android 不支持 No Chrome Android 69 Firefox Android 部分支持 44
注意事项 Disabled
部分支持 44
注意事项 Disabled
bug 1390089 .
Disabled From version 44: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android 48 Safari iOS 不支持 No Samsung Internet Android 10.0
OffscreenCanvas() 构造函数
Chrome 69 Edge ≤79 Firefox 部分支持 46
注意事项 Disabled
部分支持 46
注意事项 Disabled
bug 1390089 .
Disabled From version 46: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
IE 不支持 No Opera 56 Safari 不支持 No WebView Android 不支持 No Chrome Android 69 Firefox Android 部分支持 46
注意事项 Disabled
部分支持 46
注意事项 Disabled
bug 1390089 .
Disabled From version 46: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android Yes Safari iOS 不支持 No Samsung Internet Android 10.0
convertToBlob
Chrome 69 Edge ≤79 Firefox 部分支持 46
注意事项 Alternate Name Disabled
部分支持 46
注意事项 Alternate Name Disabled
bug 1390089 .
Alternate Name Uses the non-standard name: toBlob
Disabled From version 46: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
IE 不支持 No Opera 56 Safari 不支持 No WebView Android 不支持 No Chrome Android 69 Firefox Android 部分支持 46
注意事项 Alternate Name Disabled
部分支持 46
注意事项 Alternate Name Disabled
bug 1390089 .
Alternate Name Uses the non-standard name: toBlob
Disabled From version 46: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android 48 Safari iOS 不支持 No Samsung Internet Android 10.0
getContext
Chrome 69 Edge ≤79 Firefox 部分支持 44
注意事项 Disabled
部分支持 44
注意事项 Disabled
bug 1390089 .
Disabled From version 44: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
IE 不支持 No Opera 56 Safari 不支持 No WebView Android 不支持 No Chrome Android 69 Firefox Android 部分支持 44
注意事项 Disabled
部分支持 44
注意事项 Disabled
bug 1390089 .
Disabled From version 44: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android 48 Safari iOS 不支持 No Samsung Internet Android 10.0
height
Chrome 69 Edge ≤79 Firefox 部分支持 44
注意事项 Disabled
部分支持 44
注意事项 Disabled
bug 1390089 .
Disabled From version 44: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
IE 不支持 No Opera 56 Safari 不支持 No WebView Android 不支持 No Chrome Android 69 Firefox Android 部分支持 44
注意事项 Disabled
部分支持 44
注意事项 Disabled
bug 1390089 .
Disabled From version 44: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android 48 Safari iOS 不支持 No Samsung Internet Android 10.0
transferToImageBitmap
Chrome 69 Edge ≤79 Firefox 部分支持 46
注意事项 Disabled
部分支持 46
注意事项 Disabled
bug 1390089 .
Disabled From version 46: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
IE 不支持 No Opera 56 Safari 不支持 No WebView Android 不支持 No Chrome Android 69 Firefox Android 部分支持 46
注意事项 Disabled
部分支持 46
注意事项 Disabled
bug 1390089 .
Disabled From version 46: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android 48 Safari iOS 不支持 No Samsung Internet Android 10.0
width
Chrome 69 Edge ≤79 Firefox 部分支持 44
注意事项 Disabled
部分支持 44
注意事项 Disabled
bug 1390089 .
Disabled From version 44: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
IE 不支持 No Opera 56 Safari 不支持 No WebView Android 不支持 No Chrome Android 69 Firefox Android 部分支持 44
注意事项 Disabled
部分支持 44
注意事项 Disabled
bug 1390089 .
Disabled From version 44: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android 48 Safari iOS 不支持 No Samsung Internet Android 10.0

图例

完整支持
完整支持
部分支持
部分支持
不支持
不支持
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
见实现注意事项。
用户必须明确启用此特征。
用户必须明确启用此特征。
使用非标名称。
使用非标名称。

另请参阅