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](../arkui-js/js-offscreencanvasrenderingcontext2d.md) | 否 | 用于在离屏画布上进行绘制矩形、文本、图片等。 | 33 34**返回值：** 35 36| 类型 | 说明 | 37| ---------------------------------------- | --------------------------- | 38| [OffscreenCanvasRenderingContext2D](../arkui-js/js-offscreencanvasrenderingcontext2d.md) | 2D绘制对象，用于在画布组件上绘制矩形、文本、图片等。 | 39 40 41### toDataURL 42 43toDataURL(type?: string, quality?:number): 44 45生成一个包含图片展示的URL。 46 47**参数：** 48 49| 参数名 | 参数类型 | 必填 | 描述 | 50| ------- | ------ | ---- | ---------------------------------------- | 51| type | string | 否 | 可选参数，用于指定图像格式，默认格式为image/png。 | 52| quality | number | 否 | 在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。 | 53 54**返回值：** 55 56| 类型 | 说明 | 57| ------ | --------- | 58| string | 图像的URL地址。 | 59 60 61### transferToImageBitmap 62 63transferToImageBitmap(): ImageBitmap 64 65在离屏画布最近渲染的图像上创建一个ImageBitmap对象。 66 67**返回值：** 68 69| 类型 | 说明 | 70| ---------------------------------------- | --------------- | 71| [ImageBitmap](../arkui-js/js-components-canvas-imagebitmap.md) | 存储离屏画布上渲染的像素数据。 | 72 73 74## 示例 75 76```html 77<!-- xxx.hml --> 78<div> 79 <canvas ref="canvasId" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> 80</div> 81``` 82 83```js 84//xxx.js 85export default { 86 onShow() { 87 var canvas = this.$refs.canvasId.getContext('2d'); 88 var offscreen = new OffscreenCanvas(500,500); 89 var offscreenCanvasCtx = offscreen.getContext("2d"); 90 91 // ... some drawing for the canvas using the offscreenCanvasCtx ... 92 93 var dataURL = offscreen.toDataURL(); 94 console.log(dataURL); //data:image/png;base64,xxxxxx 95 96 var bitmap = offscreen.transferToImageBitmap(); 97 canvas.transferFromImageBitmap(bitmap); 98 } 99} 100``` 101 102