1# OffscreenCanvas对象
2
3>  **说明：**
4>  从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
5
6
7可以离屏渲染的canvas对象。
8
9
10## 属性
11
12| 属性     | 类型     | 描述                          |
13| ------ | ------ | --------------------------- |
14| width  | number | offscreen canvas对象的宽度。 |
15| height | number | offscreen canvas对象的高度。 |
16
17
18## 方法
19
20
21### getContext
22
23getContext(type: string, options?: CanvasRenderingContext2DSettings): OffscreenCanvasRenderingContext2D
24
25获取offscreen canvas绘图上下文，返回值为2D绘制对象。
26
27**参数：**
28
29| 参数名       | 参数类型                                     | 必填   | 描述                     |
30| --------- | ---------------------------------------- | ---- | ---------------------- |
31| contextId | string                                   | 是    | 仅支持 '2d'。         |
32| options   | [CanvasRenderingContext2DSettings](#canvasrenderingcontext2dsettings) | 否    | 当前仅支持配置是否开启抗锯齿功能，默认为关闭。 |
33
34**返回值：**
35
36| 类型                                       | 说明                          |
37| ---------------------------------------- | --------------------------- |
38| [OffscreenCanvasRenderingContext2D](js-offscreencanvasrenderingcontext2d.md) | 2D绘制对象，用于在画布组件上绘制矩形、文本、图片等。 |
39
40### CanvasRenderingContext2DSettings
41
42CanvasRenderingContext2DSettings(antialias?: boolean)
43
44用来配置OffscreenCanvasRenderingContext2D对象的参数，包括是否开启抗锯齿。
45
46| 参数名       | 类型      | 说明                  |
47| --------- | ------- | ------------------- |
48| antialias | boolean | 是否开启抗锯齿功能，默认为false。 |
49
50### toDataURL
51
52toDataURL(type?: string, quality?:number): string
53
54生成一个包含图片展示的URL。
55
56**参数：**
57
58| 参数名     | 参数类型   | 必填   | 描述                                       |
59| ------- | ------ | ---- | ---------------------------------------- |
60| type    | string | 否    | 可选参数，用于指定图像格式，默认格式为image/png。            |
61| quality | number | 否    | 在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。 |
62
63**返回值：**
64
65| 类型     | 说明        |
66| ------ | --------- |
67| string | 图像的URL地址。 |
68
69
70### transferToImageBitmap
71
72transferToImageBitmap(): ImageBitmap
73
74在离屏画布最近渲染的图像上创建一个ImageBitmap对象。
75
76**返回值：**
77
78| 类型                                       | 说明              |
79| ---------------------------------------- | --------------- |
80| [ImageBitmap](js-components-canvas-imagebitmap.md) | 存储离屏画布上渲染的像素数据。 |
81
82
83## 示例
84
85```html
86<!-- xxx.hml -->
87<div>
88  <canvas ref="canvasId" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
89</div>
90```
91
92```js
93//xxx.js
94export default {
95  onShow() {
96    var canvas = this.$refs.canvasId.getContext('2d');
97    var offscreen = new OffscreenCanvas(500,500);
98    var offscreenCanvasCtx = offscreen.getContext("2d");
99
100    // ... some drawing for the canvas using the offscreenCanvasCtx ...
101
102    var dataURL = offscreen.toDataURL();
103    console.log(dataURL); //data:image/png;base64,xxxxxx
104
105    var bitmap = offscreen.transferToImageBitmap();
106    canvas.transferFromImageBitmap(bitmap);
107  }
108}
109```
110
111