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