这是
实验性技术
检查
浏览器兼容性表格
要小心谨慎在生产中使用这之前。
OffscreenCanvas
interface provides a canvas that can be rendered off screen. It is available in both the window and
worker
上下文。
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
.
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>
元素
<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);
OffscreenCanvas
Another way to use the
OffscreenCanvas
API, is to call
transferControlToOffscreen()
在
<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);
};
| 规范 | 状态 | 注释 |
|---|---|---|
|
HTML 实时标准
The definition of 'OffscreenCanvas' in that specification. |
实时标准 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
OffscreenCanvas
|
Chrome 69 | Edge ≤79 |
Firefox
部分支持
44
注意事项
Disabled
|
IE 不支持 No | Opera 56 | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 69 |
Firefox Android
部分支持
44
注意事项
Disabled
|
Opera Android 48 | Safari iOS 不支持 No | Samsung Internet Android 10.0 |
OffscreenCanvas()
构造函数
|
Chrome 69 | Edge ≤79 |
Firefox
部分支持
46
注意事项
Disabled
|
IE 不支持 No | Opera 56 | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 69 |
Firefox Android
部分支持
46
注意事项
Disabled
|
Opera Android Yes | Safari iOS 不支持 No | Samsung Internet Android 10.0 |
convertToBlob
|
Chrome 69 | Edge ≤79 |
Firefox
部分支持
46
注意事项
Alternate Name
Disabled
|
IE 不支持 No | Opera 56 | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 69 |
Firefox Android
部分支持
46
注意事项
Alternate Name
Disabled
|
Opera Android 48 | Safari iOS 不支持 No | Samsung Internet Android 10.0 |
getContext
|
Chrome 69 | Edge ≤79 |
Firefox
部分支持
44
注意事项
Disabled
|
IE 不支持 No | Opera 56 | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 69 |
Firefox Android
部分支持
44
注意事项
Disabled
|
Opera Android 48 | Safari iOS 不支持 No | Samsung Internet Android 10.0 |
height
|
Chrome 69 | Edge ≤79 |
Firefox
部分支持
44
注意事项
Disabled
|
IE 不支持 No | Opera 56 | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 69 |
Firefox Android
部分支持
44
注意事项
Disabled
|
Opera Android 48 | Safari iOS 不支持 No | Samsung Internet Android 10.0 |
transferToImageBitmap
|
Chrome 69 | Edge ≤79 |
Firefox
部分支持
46
注意事项
Disabled
|
IE 不支持 No | Opera 56 | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 69 |
Firefox Android
部分支持
46
注意事项
Disabled
|
Opera Android 48 | Safari iOS 不支持 No | Samsung Internet Android 10.0 |
width
|
Chrome 69 | Edge ≤79 |
Firefox
部分支持
44
注意事项
Disabled
|
IE 不支持 No | Opera 56 | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 69 |
Firefox Android
部分支持
44
注意事项
Disabled
|
Opera Android 48 | Safari iOS 不支持 No | Samsung Internet Android 10.0 |
完整支持
部分支持
不支持
实验。期望将来行为有所改变。
见实现注意事项。
用户必须明确启用此特征。
使用非标名称。
CanvasRenderingContext2D
ImageBitmap
ImageBitmapRenderingContext
HTMLCanvasElement.transferControlToOffscreen()
WebGLRenderingContext.commit()