1# OffscreenCanvas 2 3OffscreenCanvas组件用于自定义绘制图形。 4 5使用[Canvas](ts-components-canvas-canvas.md)组件或[Canvas API](ts-canvasrenderingcontext2d.md)时，渲染、动画和用户交互通常发生在应用程序的主线程上，与画布动画和渲染相关的计算可能会影响应用程序性能。OffscreenCanvas提供了一个可以在屏幕外渲染的画布，这样可以在单独的线程中运行一些任务，从而避免影响应用程序主线程性能。 6 7> **说明：** 8> 9> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 10 11## 子组件 12 13不支持。 14 15## 接口 16 17OffscreenCanvas(width: number, height: number) 18 19从API version 9开始，该接口支持在ArkTS卡片中使用。 20 21**参数：** 22 23| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 24| ------ | -------- | ---- | ------ | ------------------------------------- | 25| width | number | 是 | 0 | OffscreenCanvas组件的宽度，单位为vp。 | 26| height | number | 是 | 0 | OffscreenCanvas组件的高度，单位为vp。 | 27 28## 属性 29 30OffscreenCanvas支持以下属性： 31 32| 名称 | 类型 | 默认值 | 描述 | 33| ------ | ------ | ------ | ------------------------------------------------------------ | 34| width | number | 0 | OffscreenCanvas组件的宽度，单位为vp。从API version 9开始，该接口支持在ArkTS卡片中使用。 | 35| height | number | 0 | OffscreenCanvas组件的高度，单位为vp。从API version 9开始，该接口支持在ArkTS卡片中使用。 | 36 37### width 38 39```ts 40// xxx.ets 41@Entry 42@Component 43struct OffscreenCanvasPage { 44 private settings: RenderingContextSettings = new RenderingContextSettings(true); 45 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 46 private offCanvas: OffscreenCanvas = new OffscreenCanvas(200, 300) 47 48 build() { 49 Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) { 50 Column() { 51 Canvas(this.context) 52 .width('100%') 53 .height('100%') 54 .borderWidth(5) 55 .borderColor('#057D02') 56 .backgroundColor('#FFFFFF') 57 .onReady(() => { 58 let offContext = this.offCanvas.getContext("2d", this.settings) 59 offContext.fillStyle = '#CDCDCD' 60 offContext.fillRect(0, 0, this.offCanvas.width, 150) 61 let image = this.offCanvas.transferToImageBitmap() 62 this.context.setTransform(1, 0, 0, 1, 50, 200) 63 this.context.transferFromImageBitmap(image) 64 }) 65 } 66 }.width('100%').height('100%') 67 } 68} 69``` 70 71 72 73### height 74 75```ts 76// xxx.ets 77@Entry 78@Component 79struct OffscreenCanvasPage { 80 private settings: RenderingContextSettings = new RenderingContextSettings(true); 81 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 82 private offCanvas: OffscreenCanvas = new OffscreenCanvas(200, 300) 83 84 build() { 85 Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) { 86 Column() { 87 Canvas(this.context) 88 .width('100%') 89 .height('100%') 90 .borderWidth(5) 91 .borderColor('#057D02') 92 .backgroundColor('#FFFFFF') 93 .onReady(() => { 94 let offContext = this.offCanvas.getContext("2d", this.settings) 95 offContext.fillStyle = '#CDCDCD' 96 offContext.fillRect(0, 0, 100, this.offCanvas.height) 97 let image = this.offCanvas.transferToImageBitmap() 98 this.context.setTransform(1, 0, 0, 1, 50, 200) 99 this.context.transferFromImageBitmap(image) 100 }) 101 } 102 }.width('100%').height('100%') 103 } 104} 105``` 106 107 108 109## 方法 110 111### transferToImageBitmap 112 113transferToImageBitmap(): ImageBitmap 114 115从OffscreenCanvas组件中最近渲染的图像创建一个ImageBitmap对象。 116 117从API version 9开始，该接口支持在ArkTS卡片中使用。 118 119**返回值：** 120 121| 类型 | 描述 | 122| -------------------------------------------------- | ----------------------- | 123| [ImageBitmap](ts-components-canvas-imagebitmap.md) | 创建的ImageBitmap对象。 | 124 125**示例：** 126 127```ts 128// xxx.ets 129@Entry 130@Component 131struct OffscreenCanvasPage { 132 private settings: RenderingContextSettings = new RenderingContextSettings(true) 133 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 134 private offCanvas: OffscreenCanvas = new OffscreenCanvas(300, 500) 135 136 build() { 137 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 138 Canvas(this.context) 139 .width('100%') 140 .height('100%') 141 .borderWidth(5) 142 .borderColor('#057D02') 143 .backgroundColor('#FFFFFF') 144 .onReady(() => { 145 let offContext = this.offCanvas.getContext("2d", this.settings) 146 offContext.fillStyle = '#CDCDCD' 147 offContext.fillRect(0, 0, 300, 500) 148 offContext.fillStyle = '#000000' 149 offContext.font = '70px serif bold' 150 offContext.fillText("Offscreen : Hello World!", 20, 60) 151 let image = this.offCanvas.transferToImageBitmap() 152 this.context.transferFromImageBitmap(image) 153 }) 154 } 155 .width('100%') 156 .height('100%') 157 } 158} 159``` 160 161 162 163### getContext<sup>10+</sup> 164 165getContext(contextType: "2d", options?: RenderingContextSettings): OffscreenCanvasRenderingContext2D 166 167返回OffscreenCanvas组件的绘图上下文。 168 169**参数：** 170 171| 参数 | 类型 | 必填 | 默认值 | 说明 | 172| ----------- | ------------------------------------------------------------ | ---- | ------ | ------------------------------------------------------------ | 173| contextType | string | 是 | "2d" | OffscreenCanvas组件绘图上下文的类型，当前仅支持"2d"类型。 | 174| options | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | 否 | - | 用来配置OffscreenCanvasRenderingContext2D对象的参数，见[RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings)。 | 175 176**返回值：** 177 178| 类型 | 描述 | 179| ------------------------------------------------------------ | --------------------------------- | 180| [OffscreenCanvasRenderingContext2D](ts-offscreencanvasrenderingcontext2d.md) | OffscreenCanvas组件的绘图上下文。如果getContext方法的入参contextType为"2d"以外类型（包括null或者undefined），返回null。 | 181 182**示例：** 183 184```ts 185@Entry 186@Component 187struct OffscreenCanvasExamplePage { 188 private settings: RenderingContextSettings = new RenderingContextSettings(true); 189 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 190 private offscreenCanvas: OffscreenCanvas = new OffscreenCanvas(600, 800) 191 192 build() { 193 Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) { 194 Column() { 195 Canvas(this.context) 196 .width('100%') 197 .height('100%') 198 .backgroundColor('#FFFFFF') 199 .onReady(() => { 200 let offContext = this.offscreenCanvas.getContext("2d", this.settings) 201 offContext.font = '70px sans-serif' 202 offContext.fillText("Offscreen : Hello World!", 20, 60) 203 offContext.fillStyle = "#0000ff" 204 offContext.fillRect(230, 350, 50, 50) 205 offContext.fillStyle = "#EE0077" 206 offContext.translate(70, 70) 207 offContext.fillRect(230, 350, 50, 50) 208 offContext.fillStyle = "#77EE0077" 209 offContext.translate(-70, -70) 210 offContext.fillStyle = "#00ffff" 211 offContext.rotate(45 * Math.PI / 180); 212 offContext.fillRect(180, 120, 50, 50); 213 offContext.rotate(-45 * Math.PI / 180); 214 offContext.beginPath() 215 offContext.moveTo(10, 150) 216 offContext.bezierCurveTo(20, 100, 200, 100, 200, 20) 217 offContext.stroke() 218 offContext.fillStyle = '#FF00FF' 219 offContext.fillRect(100, 100, 60, 60) 220 let imageData = this.offscreenCanvas.transferToImageBitmap() 221 this.context.transferFromImageBitmap(imageData) 222 }) 223 }.width('100%').height('100%') 224 } 225 .width('100%') 226 .height('100%') 227 } 228} 229``` 230 231 232 233
