1. 概述

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

2. 构造函数

OffscreenCanvas()构造函数，返回一个新的 OffscreenCanvas 对象。

new OffscreenCanvas(width, height);

参数：

width 离屏 canvas 的高度
height 离屏 canvas 的宽度

创建一个离屏 Canvas 并且初始一个 WebGL 上下文：

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

3.相关属性

height

设置或者获取OffscreenCanvas 对象的高度。

var pxl = offscreen.height;
offscreen.height = pxl;

如下例子：创建一个新的离屏 canvas，获取或者设置离屏 canvas 的高度。

var offscreen = new OffscreenCanvas(256, 256);
offscreen.height; // 256
offscreen.height = 512;

width

设置或者获取OffscreenCanvas 对象的宽度。如下例子：创建一个新的离屏 canvas，获取或者设置离屏 canvas 的宽度。

const offscreen = new OffscreenCanvas(256, 256);
offscreen.width; // 256
offscreen.width = 512;

4.方法

convertToBlob()

该方法从一个画布图像上创建一个blob对象。

convertBlob()
convertBlob(options)

参数：一个对象，该对象有以下两个属性：

type：图片格式，字符串类型，默认是image/png。
quality：一个从0到1的数字，表示图片质量。

返回值是一个Promise对象，返回一个Blob对象。

如下例子：

const offscreen = new OffscreenCanvas(256, 256);
const gl = offscreen.getContext("webgl");

// Perform some drawing using the gl context

offscreen.convertToBlob().then((blob) => console.log(blob));
// Blob { size: 334, type: "image/png" }

getContext()

该方法创建一个离屏画布的上下文内容。

getContext(contextType, contextAttributes)

参数：

contextType，具有几个类型，2d，webl，webl2，bitmaprenderer。
contextAttributes，可以对上下文类型设置对应的属性。

offscreen.getContext("webgl", { antialias: false, depth: false });

返回值不同的上下文类型，返回不同的上下文内容。

OffscreenCanvasRenderingContext2D for "2d",
WebGLRenderingContext for "webgl" and "experimental-webgl",
WebGL2RenderingContext for "webgl2" and "experimental-webgl2" Experimental, or
ImageBitmapRenderingContext for "bitmaprenderer".

例子如下：

const offscreen = new OffscreenCanvas(256, 256);
const gl = offscreen.getContext("webgl");

gl; // WebGLRenderingContext
gl.canvas; // OffscreenCanvas

transferToImageBitmap()

OffscreenCanvas.transferToImageBitmap() 方法使用offscreenCanvas最近渲染得到的图片创建一个ImageBitmap 对象。

ImageBitmap OffscreenCanvas.transferToImageBitmap()

无参数，返回值是个ImageBitmap对象。