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