OffscreenCanvas对象

说明： 从API Version 7 开始支持。

可以离屏渲染的canvas对象。

属性

属性	类型	描述
width	number	offscreen canvas对象的宽度。
height	number	offscreen canvas对象的高度。

方法

名称	参数	描述
getContext	contextId: "2d", options?: CanvasRenderingContext2DSettings	调用方法如下两种： var ctx = canvas.getContext(contextId); var ctx = canvas.getContext(contextId, options); 其中contextId为必填项，当前仅支持"2d"，options为可选项，暂时不支持。获取offscreen canvas绘图上下文，参数仅支持“2d”，返回值为2D绘制对象，该对象提供具体的2D绘制操作。详见OffscreenCanvasRenderingContext2D对象章节。
toDataURL	type?: string, quality?: number	生成一个包含图片展示的URL。 type：可选参数，用于指定图像格式，默认格式为image/png。 quality：在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。
transferToImageBitmap	无	从OffscreenCanvas最近渲染的图像创建一个 ImageBitmap 对象

名称

参数

描述

getContext

contextId: "2d", options?: CanvasRenderingContext2DSettings

调用方法如下两种：

var ctx = canvas.getContext(contextId);

var ctx = canvas.getContext(contextId, options);

其中contextId为必填项，当前仅支持"2d"，options为可选项，暂时不支持。

获取offscreen canvas绘图上下文，参数仅支持“2d”，返回值为2D绘制对象，该对象提供具体的2D绘制操作。详见OffscreenCanvasRenderingContext2D对象章节。

toDataURL

type?: string, quality?: number

生成一个包含图片展示的URL。

type：可选参数，用于指定图像格式，默认格式为image/png。
quality：在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。

transferToImageBitmap

无

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

示例

var canvas = this.$refs.canvasId.getContext('2d');
var offscreen = new OffscreenCanvas(500,500);
var offscreenCanvasCtx = offscreen.getContext("2d");

// ... some drawing for the canvas using the offscreenCanvasCtx ...

var dataURL = offscreen.toDataURL();
console.log(dataURL); //data:image/png;base64,xxxxxx

var bitmap = offscreen.transferToImageBitmap();
canvas.transferFromImageBitmap(bitmap);