1# OffscreenCanvasRenderingContext2D 2 3使用OffscreenCanvasRenderingContext2D在Canvas上进行离屏绘制，绘制对象可以是矩形、文本、图片等。离屏绘制是指将需要绘制的内容先绘制在缓存区，然后将其转换成图片，一次性绘制到canvas上，加快了绘制速度。 4 5> **说明：** 6> 7> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10 11## 接口 12 13OffscreenCanvasRenderingContext2D(width: number, height: number, settings?: RenderingContextSettings, unit?: LengthMetricsUnit) 14 15**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 16 17**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 18 19**系统能力：** SystemCapability.ArkUI.ArkUI.Full 20 21**参数：** 22 23| 参数名 | 类型 | 必填 | 说明 | 24| -------- | ---------------------------------------- | ---- | ------------------------------ | 25| width | number | 是 | 离屏画布的宽度，默认单位：vp。 | 26| height | number | 是 | 离屏画布的高度，默认单位：vp。 | 27| settings | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | 否 | 用来配置OffscreenCanvasRenderingContext2D对象的参数，见RenderingContextSettings接口描述。<br>默认值：null。 | 28| unit<sup>12+</sup> | [LengthMetricsUnit](../js-apis-arkui-graphics.md#lengthmetricsunit12) | 否 | 用来配置OffscreenCanvasRenderingContext2D对象的单位模式，配置后无法动态更改，配置方法同[CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md#lengthmetricsunit12)。<br>默认值：DEFAULT。| 29 30## 属性 31 32**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 33 34**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 35 36**系统能力：** SystemCapability.ArkUI.ArkUI.Full 37 38| 名称 | 类型 | 只读 | 可选 | 说明 | 39| ---- | ---- | ---- | ---- | ---- | 40| [fillStyle](#fillstyle) | string \|number<sup>10+</sup> \|[CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | 否 | 否 | 指定绘制的填充色。<br/>- 类型为string时，表示设置填充区域的颜色。<br/>默认值：'black'<br/>- 类型为number时，表示设置填充区域的颜色。<br/>默认值：'#000000'<br/>- 类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 | 41| [lineWidth](#linewidth) | number | 否 | 否 | 设置绘制线条的宽度。<br/>默认值：1(px)<br/>默认单位：vp<br/>linewidth取值不支持0和负数，0和负数按异常值处理，异常值按默认值处理。 | 42| [strokeStyle](#strokestyle) | string \|number<sup>10+</sup> \|[CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | 否 | 否 | 设置线条的颜色。<br/>- 类型为string时，表示设置线条使用的颜色。<br/>默认值：'black'<br/>- 类型为number时，表示设置线条使用的颜色。<br/>默认值：'#000000'<br/>- 类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 | 43| [lineCap](#linecap) | [CanvasLineCap](ts-canvasrenderingcontext2d.md#canvaslinecap) | 否 | 否 | 指定线端点的样式，可选值为：<br/>- 'butt'：线端点以方形结束。<br/>- 'round'：线端点以圆形结束。<br/>- 'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。<br/>默认值：'butt'。 | 44| [lineJoin](#linejoin) | [CanvasLineJoin](ts-canvasrenderingcontext2d.md#canvaslinejoin) | 否 | 否 | 指定线段间相交的交点样式，可选值为：<br/>- 'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。<br/>- 'bevel'：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。<br/>- 'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。<br/>默认值：'miter'。 | 45| [miterLimit](#miterlimit) | number | 否 | 否 | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 <br/>默认值：10px。<br/>单位：px。 <br/>miterLimit取值不支持0和负数，0和负数按异常值处理，异常值按默认值处理。 | 46| [font](#font) | string | 否 | 否 | 设置文本绘制中的字体样式。<br/>语法：ctx.font='font-size font-family'<br/>- font-size(可选)，指定字号和行高，单位支持px和vp。<br/>- font-family(可选)，指定字体系列。<br/>语法：ctx.font='font-style font-weight font-size font-family'<br/>- font-style(可选)，用于指定字体样式，支持如下几种样式：'normal','italic'。<br/>- font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal', 'bold', 'bolder', 'lighter', 100, 200, 300, 400, 500, 600, 700, 800, 900。<br/>- font-size(可选)，指定字号和行高，单位支持px、vp。使用时需要添加单位。<br/>- font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif', 'serif', 'monospace'。<br/>默认值：'normal normal 14px sans-serif'。 | 47| [textAlign](#textalign) | [CanvasTextAlign](ts-canvasrenderingcontext2d.md#canvastextalign) | 否 | 否 | 设置文本绘制中的文本对齐方式，可选值为：<br/>- 'left'：文本左对齐。<br/>- 'right'：文本右对齐。<br/>- 'center'：文本居中对齐。<br/>- 'start'：文本对齐界线开始的地方。<br/>- 'end'：文本对齐界线结束的地方。<br/>> **说明：**<br/>> ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。<br/>默认值：'start'。 | 48| [textBaseline](#textbaseline) | [CanvasTextBaseline](ts-canvasrenderingcontext2d.md#canvastextbaseline) | 否 | 否 | 设置文本绘制中的水平对齐方式，可选值为：<br/>- 'alphabetic'：文本基线是标准的字母基线。<br/>- 'top'：文本基线在文本块的顶部。<br/>- 'hanging'：文本基线是悬挂基线。<br/>- 'middle'：文本基线在文本块的中间。<br/>- 'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。<br/>- 'bottom'：文本基线在文本块的底部。 与ideographic基线的区别在于ideographic基线不需要考虑下行字母。<br/>默认值：'alphabetic'。 | 49| [globalAlpha](#globalalpha) | number | 否 | 否 | 设置透明度，0.0为完全透明，1.0为完全不透明。<br/>默认值：1.0。 | 50| [lineDashOffset](#linedashoffset) | number | 否 | 否 | 设置画布的虚线偏移量，精度为float。 <br/>默认值：0.0。<br/>单位：vp。 | 51| [globalCompositeOperation](#globalcompositeoperation) | string | 否 | 否 | 设置合成操作的方式。类型字段可选值有'source-over'，'source-atop'，'source-in'，'source-out'，'destination-over'，'destination-atop'，'destination-in'，'destination-out'，'lighter'，'copy'，'xor'。<br/>- 默认值：'source-over'。 | 52| [shadowBlur](#shadowblur) | number | 否 | 否 | 设置绘制阴影时的模糊级别，值越大越模糊，精度为float。 <br/>默认值：0.0。<br/>单位：px。<br/>shadowBlur取值不支持负数，负数按异常值处理，异常值按默认值处理。 | 53| [shadowColor](#shadowcolor) | string | 否 | 否 | 设置绘制阴影时的阴影颜色。<br/>默认值：透明黑色。 | 54| [shadowOffsetX](#shadowoffsetx) | number | 否 | 否 | 设置绘制阴影时和原有对象的水平偏移值。<br/>默认值：0.0。<br/>默认单位：vp。 | 55| [shadowOffsetY](#shadowoffsety) | number | 否 | 否 | 设置绘制阴影时和原有对象的垂直偏移值。<br/>默认值：0.0。<br/>默认单位：vp。 | 56| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | 否 | 否 | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。 <br/>默认值：true。 | 57| [imageSmoothingQuality](#imagesmoothingquality) | [ImageSmoothingQuality](ts-canvasrenderingcontext2d.md#imagesmoothingquality-1) | 否 | 否 | imageSmoothingEnabled为true时，用于设置图像平滑度。可选值为：<br/>- 'low'：低画质<br/>- 'medium'：中画质<br/>- 'high'：高画质。<br/>默认值："low"。 | 58| [direction](#direction) | [CanvasDirection](ts-canvasrenderingcontext2d.md#canvasdirection) | 否 | 否 | 用于设置绘制文字时使用的文字方向。可选值为：<br/>- 'inherit'：使用系统默认布局方向<br/>- 'ltr'：从左往右<br/>- 'rtl'：从右往左。<br/>默认值："inherit"。 | 59| [filter](#filter) | string | 否 | 否 | 用于设置图像的滤镜，可以组合任意数量的滤镜。<br/>支持的滤镜效果如下：<br/>- 'none': 无滤镜效果<br/>- 'blur'：给图像设置高斯模糊<br/>- 'brightness'：给图片应用一种线性乘法，使其看起来更亮或更暗<br/>- 'contrast'：调整图像的对比度<br/>- 'grayscale'：将图像转换为灰度图像<br/>- 'hue-rotate'：给图像应用色相旋转<br/>- 'invert'：反转输入图像<br/>- 'opacity'：转化图像的透明程度<br/>- 'saturate'：转换图像饱和度<br/>- 'sepia'：将图像转换为深褐色<br/>默认值：'none'。 | 60 61> **说明：** 62> fillStyle、shadowColor与 strokeStyle 中string类型格式为 'rgb(255, 255, 255)'，'rgba(255, 255, 255, 1.0)'，'\#FFFFFF'。 63 64 65### fillStyle 66 67```ts 68// xxx.ets 69@Entry 70@Component 71struct FillStyleExample { 72 private settings: RenderingContextSettings = new RenderingContextSettings(true) 73 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 74 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 75 76 build() { 77 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 78 Canvas(this.context) 79 .width('100%') 80 .height('100%') 81 .backgroundColor('#ffff00') 82 .onReady(() =>{ 83 let offContext = this.offCanvas.getContext("2d", this.settings) 84 offContext.fillStyle = '#0000ff' 85 offContext.fillRect(20, 20, 150, 100) 86 let image = this.offCanvas.transferToImageBitmap() 87 this.context.transferFromImageBitmap(image) 88 }) 89 } 90 .width('100%') 91 .height('100%') 92 } 93} 94``` 95 96 97 98```ts 99// xxx.ets 100@Entry 101@Component 102struct FillStyleExample { 103 private settings: RenderingContextSettings = new RenderingContextSettings(true) 104 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 105 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 106 107 build() { 108 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 109 Canvas(this.context) 110 .width('100%') 111 .height('100%') 112 .backgroundColor('#ffff00') 113 .onReady(() =>{ 114 let offContext = this.offCanvas.getContext("2d", this.settings) 115 offContext.fillStyle = 0x0000FF 116 offContext.fillRect(20, 20, 150, 100) 117 let image = this.offCanvas.transferToImageBitmap() 118 this.context.transferFromImageBitmap(image) 119 }) 120 } 121 .width('100%') 122 .height('100%') 123 } 124} 125``` 126 127 128 129 130### lineWidth 131 132```ts 133// xxx.ets 134@Entry 135@Component 136struct LineWidthExample { 137 private settings: RenderingContextSettings = new RenderingContextSettings(true) 138 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 139 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 140 141 build() { 142 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 143 Canvas(this.context) 144 .width('100%') 145 .height('100%') 146 .backgroundColor('#ffff00') 147 .onReady(() =>{ 148 let offContext = this.offCanvas.getContext("2d", this.settings) 149 offContext.lineWidth = 5 150 offContext.strokeRect(25, 25, 85, 105) 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 164### strokeStyle 165 166```ts 167// xxx.ets 168@Entry 169@Component 170struct StrokeStyleExample { 171 private settings: RenderingContextSettings = new RenderingContextSettings(true) 172 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 173 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 174 175 build() { 176 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 177 Canvas(this.context) 178 .width('100%') 179 .height('100%') 180 .backgroundColor('#ffff00') 181 .onReady(() =>{ 182 let offContext = this.offCanvas.getContext("2d", this.settings) 183 offContext.lineWidth = 10 184 offContext.strokeStyle = '#0000ff' 185 offContext.strokeRect(25, 25, 155, 105) 186 let image = this.offCanvas.transferToImageBitmap() 187 this.context.transferFromImageBitmap(image) 188 }) 189 } 190 .width('100%') 191 .height('100%') 192 } 193} 194``` 195 196 197 198```ts 199// xxx.ets 200@Entry 201@Component 202struct StrokeStyleExample { 203 private settings: RenderingContextSettings = new RenderingContextSettings(true) 204 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 205 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 206 207 build() { 208 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 209 Canvas(this.context) 210 .width('100%') 211 .height('100%') 212 .backgroundColor('#ffff00') 213 .onReady(() =>{ 214 let offContext = this.offCanvas.getContext("2d", this.settings) 215 offContext.lineWidth = 10 216 offContext.strokeStyle = 0x0000ff 217 offContext.strokeRect(25, 25, 155, 105) 218 let image = this.offCanvas.transferToImageBitmap() 219 this.context.transferFromImageBitmap(image) 220 }) 221 } 222 .width('100%') 223 .height('100%') 224 } 225} 226``` 227 228 229 230 231### lineCap 232 233```ts 234// xxx.ets 235@Entry 236@Component 237struct LineCapExample { 238 private settings: RenderingContextSettings = new RenderingContextSettings(true) 239 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 240 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 241 242 build() { 243 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 244 Canvas(this.context) 245 .width('100%') 246 .height('100%') 247 .backgroundColor('#ffff00') 248 .onReady(() =>{ 249 let offContext = this.offCanvas.getContext("2d", this.settings) 250 offContext.lineWidth = 8 251 offContext.beginPath() 252 offContext.lineCap = 'round' 253 offContext.moveTo(30, 50) 254 offContext.lineTo(220, 50) 255 offContext.stroke() 256 let image = this.offCanvas.transferToImageBitmap() 257 this.context.transferFromImageBitmap(image) 258 }) 259 } 260 .width('100%') 261 .height('100%') 262 } 263} 264``` 265 266 267 268 269### lineJoin 270 271```ts 272// xxx.ets 273@Entry 274@Component 275struct LineJoinExample { 276 private settings: RenderingContextSettings = new RenderingContextSettings(true) 277 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 278 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 279 280 build() { 281 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 282 Canvas(this.context) 283 .width('100%') 284 .height('100%') 285 .backgroundColor('#ffff00') 286 .onReady(() =>{ 287 let offContext = this.offCanvas.getContext("2d", this.settings) 288 offContext.beginPath() 289 offContext.lineWidth = 8 290 offContext.lineJoin = 'miter' 291 offContext.moveTo(30, 30) 292 offContext.lineTo(120, 60) 293 offContext.lineTo(30, 110) 294 offContext.stroke() 295 let image = this.offCanvas.transferToImageBitmap() 296 this.context.transferFromImageBitmap(image) 297 }) 298 } 299 .width('100%') 300 .height('100%') 301 } 302} 303``` 304 305 306 307 308### miterLimit 309 310```ts 311// xxx.ets 312@Entry 313@Component 314struct MiterLimit { 315 private settings: RenderingContextSettings = new RenderingContextSettings(true) 316 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 317 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 318 319 build() { 320 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 321 Canvas(this.context) 322 .width('100%') 323 .height('100%') 324 .backgroundColor('#ffff00') 325 .onReady(() =>{ 326 let offContext = this.offCanvas.getContext("2d", this.settings) 327 offContext.lineWidth = 8 328 offContext.lineJoin = 'miter' 329 offContext.miterLimit = 3 330 offContext.moveTo(30, 30) 331 offContext.lineTo(60, 35) 332 offContext.lineTo(30, 37) 333 offContext.stroke() 334 let image = this.offCanvas.transferToImageBitmap() 335 this.context.transferFromImageBitmap(image) 336 }) 337 } 338 .width('100%') 339 .height('100%') 340 } 341} 342``` 343 344 345 346 347### font 348 349```ts 350// xxx.ets 351@Entry 352@Component 353struct Fonts { 354 private settings: RenderingContextSettings = new RenderingContextSettings(true) 355 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 356 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 357 358 build() { 359 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 360 Canvas(this.context) 361 .width('100%') 362 .height('100%') 363 .backgroundColor('#ffff00') 364 .onReady(() =>{ 365 let offContext = this.offCanvas.getContext("2d", this.settings) 366 offContext.font = '30px sans-serif' 367 offContext.fillText("Hello px", 20, 60) 368 offContext.font = '30vp sans-serif' 369 offContext.fillText("Hello vp", 20, 100) 370 let image = this.offCanvas.transferToImageBitmap() 371 this.context.transferFromImageBitmap(image) 372 }) 373 } 374 .width('100%') 375 .height('100%') 376 } 377} 378``` 379 380 381 382 383### textAlign 384 385```ts 386// xxx.ets 387@Entry 388@Component 389struct CanvasExample { 390 private settings: RenderingContextSettings = new RenderingContextSettings(true) 391 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 392 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 393 394 build() { 395 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 396 Canvas(this.context) 397 .width('100%') 398 .height('100%') 399 .backgroundColor('#ffff00') 400 .onReady(() =>{ 401 let offContext = this.offCanvas.getContext("2d", this.settings) 402 offContext.strokeStyle = '#0000ff' 403 offContext.moveTo(140, 10) 404 offContext.lineTo(140, 160) 405 offContext.stroke() 406 407 offContext.font = '18px sans-serif' 408 409 offContext.textAlign = 'start' 410 offContext.fillText('textAlign=start', 140, 60) 411 offContext.textAlign = 'end' 412 offContext.fillText('textAlign=end', 140, 80) 413 offContext.textAlign = 'left' 414 offContext.fillText('textAlign=left', 140, 100) 415 offContext.textAlign = 'center' 416 offContext.fillText('textAlign=center',140, 120) 417 offContext.textAlign = 'right' 418 offContext.fillText('textAlign=right',140, 140) 419 let image = this.offCanvas.transferToImageBitmap() 420 this.context.transferFromImageBitmap(image) 421 }) 422 } 423 .width('100%') 424 .height('100%') 425 } 426} 427``` 428 429 430 431 432### textBaseline 433 434```ts 435// xxx.ets 436@Entry 437@Component 438struct TextBaseline { 439 private settings: RenderingContextSettings = new RenderingContextSettings(true) 440 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 441 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 442 443 build() { 444 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 445 Canvas(this.context) 446 .width('100%') 447 .height('100%') 448 .backgroundColor('#ffff00') 449 .onReady(() =>{ 450 let offContext = this.offCanvas.getContext("2d", this.settings) 451 offContext.strokeStyle = '#0000ff' 452 offContext.moveTo(0, 120) 453 offContext.lineTo(400, 120) 454 offContext.stroke() 455 456 offContext.font = '20px sans-serif' 457 458 offContext.textBaseline = 'top' 459 offContext.fillText('Top', 10, 120) 460 offContext.textBaseline = 'bottom' 461 offContext.fillText('Bottom', 55, 120) 462 offContext.textBaseline = 'middle' 463 offContext.fillText('Middle', 125, 120) 464 offContext.textBaseline = 'alphabetic' 465 offContext.fillText('Alphabetic', 195, 120) 466 offContext.textBaseline = 'hanging' 467 offContext.fillText('Hanging', 295, 120) 468 let image = this.offCanvas.transferToImageBitmap() 469 this.context.transferFromImageBitmap(image) 470 }) 471 } 472 .width('100%') 473 .height('100%') 474 } 475} 476``` 477 478 479 480 481### globalAlpha 482 483```ts 484// xxx.ets 485@Entry 486@Component 487struct GlobalAlpha { 488 private settings: RenderingContextSettings = new RenderingContextSettings(true) 489 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 490 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 491 492 build() { 493 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 494 Canvas(this.context) 495 .width('100%') 496 .height('100%') 497 .backgroundColor('#ffff00') 498 .onReady(() =>{ 499 let offContext = this.offCanvas.getContext("2d", this.settings) 500 offContext.fillStyle = 'rgb(0,0,255)' 501 offContext.fillRect(0, 0, 50, 50) 502 offContext.globalAlpha = 0.4 503 offContext.fillStyle = 'rgb(0,0,255)' 504 offContext.fillRect(50, 50, 50, 50) 505 let image = this.offCanvas.transferToImageBitmap() 506 this.context.transferFromImageBitmap(image) 507 }) 508 } 509 .width('100%') 510 .height('100%') 511 } 512} 513``` 514 515 516 517 518### lineDashOffset 519 520```ts 521// xxx.ets 522@Entry 523@Component 524struct LineDashOffset { 525 private settings: RenderingContextSettings = new RenderingContextSettings(true) 526 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 527 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 528 529 build() { 530 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 531 Canvas(this.context) 532 .width('100%') 533 .height('100%') 534 .backgroundColor('#ffff00') 535 .onReady(() =>{ 536 let offContext = this.offCanvas.getContext("2d", this.settings) 537 offContext.arc(100, 75, 50, 0, 6.28) 538 offContext.setLineDash([10,20]) 539 offContext.lineDashOffset = 10.0 540 offContext.stroke() 541 let image = this.offCanvas.transferToImageBitmap() 542 this.context.transferFromImageBitmap(image) 543 }) 544 } 545 .width('100%') 546 .height('100%') 547 } 548} 549 550``` 551 552 553 554### globalCompositeOperation 555 556| 名称 | 描述 | 557| ---------------- | ------------------------ | 558| source-over | 在现有绘制内容上显示新绘制内容，属于默认值。 | 559| source-atop | 在现有绘制内容顶部显示新绘制内容。 | 560| source-in | 在现有绘制内容中显示新绘制内容。 | 561| source-out | 在现有绘制内容之外显示新绘制内容。 | 562| destination-over | 在新绘制内容上方显示现有绘制内容。 | 563| destination-atop | 在新绘制内容顶部显示现有绘制内容。 | 564| destination-in | 在新绘制内容中显示现有绘制内容。 | 565| destination-out | 在新绘制内容外显示现有绘制内容。 | 566| lighter | 显示新绘制内容和现有绘制内容。 | 567| copy | 显示新绘制内容而忽略现有绘制内容。 | 568| xor | 使用异或操作对新绘制内容与现有绘制内容进行融合。 | 569 570```ts 571// xxx.ets 572@Entry 573@Component 574struct GlobalCompositeOperation { 575 private settings: RenderingContextSettings = new RenderingContextSettings(true) 576 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 577 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 578 579 build() { 580 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 581 Canvas(this.context) 582 .width('100%') 583 .height('100%') 584 .backgroundColor('#ffff00') 585 .onReady(() =>{ 586 let offContext = this.offCanvas.getContext("2d", this.settings) 587 offContext.fillStyle = 'rgb(255,0,0)' 588 offContext.fillRect(20, 20, 50, 50) 589 offContext.globalCompositeOperation = 'source-over' 590 offContext.fillStyle = 'rgb(0,0,255)' 591 offContext.fillRect(50, 50, 50, 50) 592 offContext.fillStyle = 'rgb(255,0,0)' 593 offContext.fillRect(120, 20, 50, 50) 594 offContext.globalCompositeOperation = 'destination-over' 595 offContext.fillStyle = 'rgb(0,0,255)' 596 offContext.fillRect(150, 50, 50, 50) 597 let image = this.offCanvas.transferToImageBitmap() 598 this.context.transferFromImageBitmap(image) 599 }) 600 } 601 .width('100%') 602 .height('100%') 603 } 604} 605``` 606 607 608 609 610### shadowBlur 611 612```ts 613// xxx.ets 614@Entry 615@Component 616struct ShadowBlur { 617 private settings: RenderingContextSettings = new RenderingContextSettings(true) 618 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 619 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 620 621 build() { 622 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 623 Canvas(this.context) 624 .width('100%') 625 .height('100%') 626 .backgroundColor('#ffff00') 627 .onReady(() =>{ 628 let offContext = this.offCanvas.getContext("2d", this.settings) 629 offContext.shadowBlur = 30 630 offContext.shadowColor = 'rgb(0,0,0)' 631 offContext.fillStyle = 'rgb(255,0,0)' 632 offContext.fillRect(20, 20, 100, 80) 633 let image = this.offCanvas.transferToImageBitmap() 634 this.context.transferFromImageBitmap(image) 635 }) 636 } 637 .width('100%') 638 .height('100%') 639 } 640} 641``` 642 643 644 645 646### shadowColor 647 648```ts 649// xxx.ets 650@Entry 651@Component 652struct ShadowColor { 653 private settings: RenderingContextSettings = new RenderingContextSettings(true) 654 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 655 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 656 657 build() { 658 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 659 Canvas(this.context) 660 .width('100%') 661 .height('100%') 662 .backgroundColor('#ffff00') 663 .onReady(() =>{ 664 let offContext = this.offCanvas.getContext("2d", this.settings) 665 offContext.shadowBlur = 30 666 offContext.shadowColor = 'rgb(0,0,255)' 667 offContext.fillStyle = 'rgb(255,0,0)' 668 offContext.fillRect(30, 30, 100, 100) 669 let image = this.offCanvas.transferToImageBitmap() 670 this.context.transferFromImageBitmap(image) 671 }) 672 } 673 .width('100%') 674 .height('100%') 675 } 676} 677``` 678 679 680 681 682### shadowOffsetX 683 684```ts 685// xxx.ets 686@Entry 687@Component 688struct ShadowOffsetX { 689 private settings: RenderingContextSettings = new RenderingContextSettings(true) 690 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 691 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 692 693 build() { 694 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 695 Canvas(this.context) 696 .width('100%') 697 .height('100%') 698 .backgroundColor('#ffff00') 699 .onReady(() =>{ 700 let offContext = this.offCanvas.getContext("2d", this.settings) 701 offContext.shadowBlur = 10 702 offContext.shadowOffsetX = 20 703 offContext.shadowColor = 'rgb(0,0,0)' 704 offContext.fillStyle = 'rgb(255,0,0)' 705 offContext.fillRect(20, 20, 100, 80) 706 let image = this.offCanvas.transferToImageBitmap() 707 this.context.transferFromImageBitmap(image) 708 }) 709 } 710 .width('100%') 711 .height('100%') 712 } 713} 714``` 715 716 717 718 719### shadowOffsetY 720 721```ts 722// xxx.ets 723@Entry 724@Component 725struct ShadowOffsetY { 726 private settings: RenderingContextSettings = new RenderingContextSettings(true) 727 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 728 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 729 730 build() { 731 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 732 Canvas(this.context) 733 .width('100%') 734 .height('100%') 735 .backgroundColor('#ffff00') 736 .onReady(() =>{ 737 let offContext = this.offCanvas.getContext("2d", this.settings) 738 offContext.shadowBlur = 10 739 offContext.shadowOffsetY = 20 740 offContext.shadowColor = 'rgb(0,0,0)' 741 offContext.fillStyle = 'rgb(255,0,0)' 742 offContext.fillRect(30, 30, 100, 100) 743 let image = this.offCanvas.transferToImageBitmap() 744 this.context.transferFromImageBitmap(image) 745 }) 746 } 747 .width('100%') 748 .height('100%') 749 } 750} 751``` 752 753 754 755 756### imageSmoothingEnabled 757 758```ts 759// xxx.ets 760@Entry 761@Component 762struct ImageSmoothingEnabled { 763 private settings: RenderingContextSettings = new RenderingContextSettings(true) 764 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 765 private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") 766 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 767 768 build() { 769 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 770 Canvas(this.context) 771 .width('100%') 772 .height('100%') 773 .backgroundColor('#ffff00') 774 .onReady(() =>{ 775 let offContext = this.offCanvas.getContext("2d", this.settings) 776 offContext.imageSmoothingEnabled = false 777 offContext.drawImage(this.img,0,0,400,200) 778 let image = this.offCanvas.transferToImageBitmap() 779 this.context.transferFromImageBitmap(image) 780 }) 781 } 782 .width('100%') 783 .height('100%') 784 } 785} 786``` 787 788 789 790 791### imageSmoothingQuality 792 793```ts 794 // xxx.ets 795 @Entry 796 @Component 797 struct ImageSmoothingQualityDemoOff { 798 private settings: RenderingContextSettings = new RenderingContextSettings(true); 799 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this. 800settings); 801 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 802 private img:ImageBitmap = new ImageBitmap("common/images/example.jpg"); 803 804 build() { 805 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, 806justifyContent: FlexAlign.Center }) { 807 Canvas(this.context) 808 .width('100%') 809 .height('100%') 810 .backgroundColor('#ffff00') 811 .onReady(() =>{ 812 let offContext = this.offCanvas.getContext("2d", this.settings) 813 let offctx = offContext 814 offctx.imageSmoothingEnabled = true 815 offctx.imageSmoothingQuality = 'high' 816 offctx.drawImage(this.img, 0, 0, 400, 200) 817 818 let image = this.offCanvas.transferToImageBitmap() 819 this.context.transferFromImageBitmap(image) 820 }) 821 } 822 .width('100%') 823 .height('100%') 824 } 825 } 826``` 827 828 829 830### direction 831 832```ts 833 // xxx.ets 834 @Entry 835 @Component 836 struct DirectionDemoOff { 837 private settings: RenderingContextSettings = new RenderingContextSettings(true); 838 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this. 839settings); 840 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 841 842 build() { 843 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, 844justifyContent: FlexAlign.Center }) { 845 Canvas(this.context) 846 .width('100%') 847 .height('100%') 848 .backgroundColor('#ffff00') 849 .onReady(() =>{ 850 let offContext = this.offCanvas.getContext("2d", this.settings) 851 let offctx = offContext 852 offctx.font = '48px serif'; 853 offctx.textAlign = 'start' 854 offctx.fillText("Hi ltr!", 200, 50); 855 856 offctx.direction = "rtl"; 857 offctx.fillText("Hi rtl!", 200, 100); 858 859 let image = offctx.transferToImageBitmap() 860 this.context.transferFromImageBitmap(image) 861 }) 862 } 863 .width('100%') 864 .height('100%') 865 } 866 } 867``` 868 869 870 871### filter 872 873```ts 874 // xxx.ets 875 @Entry 876 @Component 877 struct FilterDemoOff { 878 private settings: RenderingContextSettings = new RenderingContextSettings(true); 879 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 880 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 881 private img:ImageBitmap = new ImageBitmap("common/images/example.jpg"); 882 883 build() { 884 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign. 885Center }) { 886 Canvas(this.context) 887 .width('100%') 888 .height('100%') 889 .backgroundColor('#ffff00') 890 .onReady(() =>{ 891 let offContext = this.offCanvas.getContext("2d", this.settings) 892 let offctx = offContext 893 let img = this.img 894 895 offctx.drawImage(img, 0, 0, 100, 100); 896 897 offctx.filter = 'grayscale(50%)'; 898 offctx.drawImage(img, 100, 0, 100, 100); 899 900 offctx.filter = 'sepia(60%)'; 901 offctx.drawImage(img, 200, 0, 100, 100); 902 903 offctx.filter = 'saturate(30%)'; 904 offctx.drawImage(img, 0, 100, 100, 100); 905 906 offctx.filter = 'hue-rotate(90degree)'; 907 offctx.drawImage(img, 100, 100, 100, 100); 908 909 offctx.filter = 'invert(100%)'; 910 offctx.drawImage(img, 200, 100, 100, 100); 911 912 offctx.filter = 'opacity(25%)'; 913 offctx.drawImage(img, 0, 200, 100, 100); 914 915 offctx.filter = 'brightness(0.4)'; 916 offctx.drawImage(img, 100, 200, 100, 100); 917 918 offctx.filter = 'contrast(200%)'; 919 offctx.drawImage(img, 200, 200, 100, 100); 920 921 offctx.filter = 'blur(5px)'; 922 offctx.drawImage(img, 0, 300, 100, 100); 923 924 let image = this.offCanvas.transferToImageBitmap() 925 this.context.transferFromImageBitmap(image) 926 }) 927 } 928 .width('100%') 929 .height('100%') 930 } 931 } 932``` 933 934 935 936## 方法 937 938 939### fillRect 940 941fillRect(x: number, y: number, w: number, h: number): void 942 943填充一个矩形。 944 945**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 946 947**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 948 949**系统能力：** SystemCapability.ArkUI.ArkUI.Full 950 951 **参数：** 952 953| 参数名 | 类型 | 必填 | 说明 | 954| ------ | ------ | ---- | ------------- | 955| x | number | 是 | 指定矩形左上角点的x坐标。<br>默认单位：vp。 | 956| y | number | 是 | 指定矩形左上角点的y坐标。<br>默认单位：vp。 | 957| w | number | 是 | 指定矩形的宽度。<br>默认单位：vp。 | 958| h | number | 是 | 指定矩形的高度。<br>默认单位：vp。 | 959 960 **示例：** 961 962 ```ts 963 // xxx.ets 964 @Entry 965 @Component 966 struct FillRect { 967 private settings: RenderingContextSettings = new RenderingContextSettings(true) 968 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 969 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 970 971 build() { 972 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 973 Canvas(this.context) 974 .width('100%') 975 .height('100%') 976 .backgroundColor('#ffff00') 977 .onReady(() =>{ 978 let offContext = this.offCanvas.getContext("2d", this.settings) 979 offContext.fillRect(30,30,100,100) 980 let image = this.offCanvas.transferToImageBitmap() 981 this.context.transferFromImageBitmap(image) 982 }) 983 } 984 .width('100%') 985 .height('100%') 986 } 987 } 988 ``` 989 990  991 992 993### strokeRect 994 995strokeRect(x: number, y: number, w: number, h: number): void 996 997绘制具有边框的矩形，矩形内部不填充。 998 999**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1000 1001**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1002 1003**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1004 1005 **参数：** 1006 1007| 参数名 | 类型 | 必填 | 说明 | 1008| ------ | ------ | ---- | ------------ | 1009| x | number | 是 | 指定矩形的左上角x坐标。<br>默认单位：vp。 | 1010| y | number | 是 | 指定矩形的左上角y坐标。<br>默认单位：vp。 | 1011| width | number | 是 | 指定矩形的宽度。<br>默认单位：vp。 | 1012| height | number | 是 | 指定矩形的高度。<br>默认单位：vp。 | 1013 1014 **示例：** 1015 1016 ```ts 1017 // xxx.ets 1018 @Entry 1019 @Component 1020 struct StrokeRect { 1021 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1022 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1023 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1024 1025 build() { 1026 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1027 Canvas(this.context) 1028 .width('100%') 1029 .height('100%') 1030 .backgroundColor('#ffff00') 1031 .onReady(() =>{ 1032 let offContext = this.offCanvas.getContext("2d", this.settings) 1033 offContext.strokeRect(30, 30, 200, 150) 1034 let image = this.offCanvas.transferToImageBitmap() 1035 this.context.transferFromImageBitmap(image) 1036 }) 1037 } 1038 .width('100%') 1039 .height('100%') 1040 } 1041 } 1042 ``` 1043 1044  1045 1046 1047### clearRect 1048 1049clearRect(x: number, y: number, w: number, h: number): void 1050 1051删除指定区域内的绘制内容。 1052 1053**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1054 1055**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1056 1057**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1058 1059 **参数：** 1060 1061| 参数名 | 类型 | 必填 | 说明 | 1062| ------ | ------ | ---- | ------------- | 1063| x | number | 是 | 指定矩形上的左上角x坐标。<br>默认单位：vp。 | 1064| y | number | 是 | 指定矩形上的左上角y坐标。<br>默认单位：vp。 | 1065| width | number | 是 | 指定矩形的宽度。<br>默认单位：vp。 | 1066| height | number | 是 | 指定矩形的高度。<br>默认单位：vp。 | 1067 1068 **示例：** 1069 1070 ```ts 1071 // xxx.ets 1072 @Entry 1073 @Component 1074 struct ClearRect { 1075 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1076 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1077 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1078 1079 build() { 1080 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1081 Canvas(this.context) 1082 .width('100%') 1083 .height('100%') 1084 .backgroundColor('#ffff00') 1085 .onReady(() =>{ 1086 let offContext = this.offCanvas.getContext("2d", this.settings) 1087 offContext.fillStyle = 'rgb(0,0,255)' 1088 offContext.fillRect(20,20,200,200) 1089 offContext.clearRect(30,30,150,100) 1090 let image = this.offCanvas.transferToImageBitmap() 1091 this.context.transferFromImageBitmap(image) 1092 }) 1093 } 1094 .width('100%') 1095 .height('100%') 1096 } 1097 } 1098 ``` 1099 1100  1101 1102 1103### fillText 1104 1105fillText(text: string, x: number, y: number, maxWidth?: number): void 1106 1107绘制填充类文本。 1108 1109**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1110 1111**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1112 1113**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1114 1115**参数：** 1116 1117| 参数名 | 类型 | 必填 | 说明 | 1118| -------- | ------ | ---- | --------------- | 1119| text | string | 是 | 需要绘制的文本内容。 | 1120| x | number | 是 | 需要绘制的文本的左下角x坐标。<br>默认单位：vp。 | 1121| y | number | 是 | 需要绘制的文本的左下角y坐标。<br>默认单位：vp。 | 1122| maxWidth | number | 否 | 指定文本允许的最大宽度。<br>默认单位：vp。<br>默认值：不限制宽度。 | 1123 1124 **示例：** 1125 1126 ```ts 1127 // xxx.ets 1128 @Entry 1129 @Component 1130 struct FillText { 1131 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1132 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1133 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1134 1135 build() { 1136 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1137 Canvas(this.context) 1138 .width('100%') 1139 .height('100%') 1140 .backgroundColor('#ffff00') 1141 .onReady(() =>{ 1142 let offContext = this.offCanvas.getContext("2d", this.settings) 1143 offContext.font = '30px sans-serif' 1144 offContext.fillText("Hello World!", 20, 100) 1145 let image = this.offCanvas.transferToImageBitmap() 1146 this.context.transferFromImageBitmap(image) 1147 }) 1148 } 1149 .width('100%') 1150 .height('100%') 1151 } 1152 } 1153 ``` 1154 1155  1156 1157 1158### strokeText 1159 1160strokeText(text: string, x: number, y: number, maxWidth?: number): void 1161 1162绘制描边类文本。 1163 1164**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1165 1166**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1167 1168**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1169 1170**参数：** 1171 1172| 参数名 | 类型 | 必填 | 说明 | 1173| -------- | ------ | ---- | --------------- | 1174| text | string | 是 | 需要绘制的文本内容。 | 1175| x | number | 是 | 需要绘制的文本的左下角x坐标。<br>默认单位：vp。 | 1176| y | number | 是 | 需要绘制的文本的左下角y坐标。<br>默认单位：vp。 | 1177| maxWidth | number | 否 | 需要绘制的文本的最大宽度。<br>默认单位：vp。<br>默认值：不限制宽度。 | 1178 1179 **示例：** 1180 1181 ```ts 1182 // xxx.ets 1183 @Entry 1184 @Component 1185 struct StrokeText { 1186 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1187 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1188 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1189 1190 build() { 1191 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1192 Canvas(this.context) 1193 .width('100%') 1194 .height('100%') 1195 .backgroundColor('#ffff00') 1196 .onReady(() =>{ 1197 let offContext = this.offCanvas.getContext("2d", this.settings) 1198 offContext.font = '55px sans-serif' 1199 offContext.strokeText("Hello World!", 20, 60) 1200 let image = this.offCanvas.transferToImageBitmap() 1201 this.context.transferFromImageBitmap(image) 1202 }) 1203 } 1204 .width('100%') 1205 .height('100%') 1206 } 1207 } 1208 ``` 1209 1210  1211 1212 1213### measureText 1214 1215measureText(text: string): TextMetrics 1216 1217该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。 1218 1219**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1220 1221**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1222 1223**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1224 1225 **参数：** 1226 1227| 参数名 | 类型 | 必填 | 说明 | 1228| ---- | ------ | ---- | ---------- | 1229| text | string | 是 | 需要进行测量的文本。 | 1230 1231 **返回值：** 1232 1233| 类型 | 说明 | 1234| ----------- | ---------------------------------------- | 1235| [TextMetrics](ts-canvasrenderingcontext2d.md#textmetrics) | 文本的尺寸信息。 | 1236 1237 **示例：** 1238 1239 ```ts 1240 // xxx.ets 1241 @Entry 1242 @Component 1243 struct MeasureText { 1244 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1245 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1246 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1247 1248 build() { 1249 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1250 Canvas(this.context) 1251 .width('100%') 1252 .height('100%') 1253 .backgroundColor('#ffff00') 1254 .onReady(() =>{ 1255 let offContext = this.offCanvas.getContext("2d", this.settings) 1256 offContext.font = '50px sans-serif' 1257 offContext.fillText("Hello World!", 20, 100) 1258 offContext.fillText("width:" + this.context.measureText("Hello World!").width, 20, 200) 1259 let image = this.offCanvas.transferToImageBitmap() 1260 this.context.transferFromImageBitmap(image) 1261 }) 1262 } 1263 .width('100%') 1264 .height('100%') 1265 } 1266 } 1267 ``` 1268 1269  1270 1271 1272### stroke 1273 1274stroke(): void 1275 1276根据当前的路径，进行边框绘制操作。 1277 1278**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1279 1280**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1281 1282**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1283 1284**示例：** 1285 1286 ```ts 1287 // xxx.ets 1288 @Entry 1289 @Component 1290 struct Stroke { 1291 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1292 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1293 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1294 1295 build() { 1296 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1297 Canvas(this.context) 1298 .width('100%') 1299 .height('100%') 1300 .backgroundColor('#ffff00') 1301 .onReady(() => { 1302 let offContext = this.offCanvas.getContext("2d", this.settings) 1303 offContext.moveTo(125, 25) 1304 offContext.lineTo(125, 105) 1305 offContext.lineTo(175, 105) 1306 offContext.lineTo(175, 25) 1307 offContext.strokeStyle = 'rgb(255,0,0)' 1308 offContext.stroke() 1309 let image = this.offCanvas.transferToImageBitmap() 1310 this.context.transferFromImageBitmap(image) 1311 }) 1312 } 1313 .width('100%') 1314 .height('100%') 1315 } 1316 } 1317 ``` 1318 1319  1320 1321stroke(path: Path2D): void 1322 1323根据指定的路径，进行边框绘制操作。 1324 1325**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1326 1327**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1328 1329**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1330 1331 **参数：** 1332 1333| 参数名 | 类型 | 必填 | 说明 | 1334| ---- | ---------------------------------------- | ---- | ------------ | 1335| path | [Path2D](ts-components-canvas-path2d.md) | 是 | 需要绘制的Path2D。 | 1336 1337 **示例：** 1338 1339 ```ts 1340 // xxx.ets 1341 @Entry 1342 @Component 1343 struct Stroke { 1344 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1345 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1346 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1347 private path2Da: Path2D = new Path2D() 1348 1349 build() { 1350 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1351 Canvas(this.context) 1352 .width('100%') 1353 .height('100%') 1354 .backgroundColor('#ffff00') 1355 .onReady(() => { 1356 let offContext = this.offCanvas.getContext("2d", this.settings) 1357 this.path2Da.moveTo(25, 25) 1358 this.path2Da.lineTo(25, 105) 1359 this.path2Da.lineTo(75, 105) 1360 this.path2Da.lineTo(75, 25) 1361 offContext.strokeStyle = 'rgb(0,0,255)' 1362 offContext.stroke(this.path2Da) 1363 let image = this.offCanvas.transferToImageBitmap() 1364 this.context.transferFromImageBitmap(image) 1365 }) 1366 } 1367 .width('100%') 1368 .height('100%') 1369 } 1370 } 1371 ``` 1372 1373  1374 1375 1376### beginPath 1377 1378beginPath(): void 1379 1380创建一个新的绘制路径。 1381 1382**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1383 1384**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1385 1386**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1387 1388 **示例：** 1389 1390 ```ts 1391 // xxx.ets 1392 @Entry 1393 @Component 1394 struct BeginPath { 1395 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1396 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1397 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1398 1399 build() { 1400 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1401 Canvas(this.context) 1402 .width('100%') 1403 .height('100%') 1404 .backgroundColor('#ffff00') 1405 .onReady(() =>{ 1406 let offContext = this.offCanvas.getContext("2d", this.settings) 1407 offContext.beginPath() 1408 offContext.lineWidth = 6 1409 offContext.strokeStyle = '#0000ff' 1410 offContext.moveTo(15, 80) 1411 offContext.lineTo(280, 160) 1412 offContext.stroke() 1413 let image = this.offCanvas.transferToImageBitmap() 1414 this.context.transferFromImageBitmap(image) 1415 }) 1416 } 1417 .width('100%') 1418 .height('100%') 1419 } 1420 } 1421 ``` 1422 1423  1424 1425 1426### moveTo 1427 1428moveTo(x: number, y: number): void 1429 1430路径从当前点移动到指定点。 1431 1432**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1433 1434**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1435 1436**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1437 1438 **参数：** 1439 1440| 参数名 | 类型 | 必填 | 说明 | 1441| ---- | ------ | ---- | --------- | 1442| x | number | 是 | 指定位置的x坐标。<br>默认单位：vp。 | 1443| y | number | 是 | 指定位置的y坐标。<br>默认单位：vp。 | 1444 1445 **示例：** 1446 1447 ```ts 1448 // xxx.ets 1449 @Entry 1450 @Component 1451 struct MoveTo { 1452 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1453 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1454 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1455 1456 build() { 1457 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1458 Canvas(this.context) 1459 .width('100%') 1460 .height('100%') 1461 .backgroundColor('#ffff00') 1462 .onReady(() =>{ 1463 let offContext = this.offCanvas.getContext("2d", this.settings) 1464 offContext.beginPath() 1465 offContext.moveTo(10, 10) 1466 offContext.lineTo(280, 160) 1467 offContext.stroke() 1468 let image = this.offCanvas.transferToImageBitmap() 1469 this.context.transferFromImageBitmap(image) 1470 }) 1471 } 1472 .width('100%') 1473 .height('100%') 1474 } 1475 } 1476 ``` 1477 1478  1479 1480 1481### lineTo 1482 1483lineTo(x: number, y: number): void 1484 1485从当前点到指定点进行路径连接。 1486 1487**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1488 1489**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1490 1491**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1492 1493 **参数：** 1494 1495| 参数名 | 类型 | 必填 | 描述 | 1496| ---- | ------ | ---- | --------- | 1497| x | number | 是 | 指定位置的x坐标。<br>默认单位：vp。 | 1498| y | number | 是 | 指定位置的y坐标。<br>默认单位：vp。 | 1499 1500 **示例：** 1501 1502 ```ts 1503 // xxx.ets 1504 @Entry 1505 @Component 1506 struct LineTo { 1507 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1508 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1509 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1510 1511 build() { 1512 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1513 Canvas(this.context) 1514 .width('100%') 1515 .height('100%') 1516 .backgroundColor('#ffff00') 1517 .onReady(() =>{ 1518 let offContext = this.offCanvas.getContext("2d", this.settings) 1519 offContext.beginPath() 1520 offContext.moveTo(10, 10) 1521 offContext.lineTo(280, 160) 1522 offContext.stroke() 1523 let image = this.offCanvas.transferToImageBitmap() 1524 this.context.transferFromImageBitmap(image) 1525 }) 1526 } 1527 .width('100%') 1528 .height('100%') 1529 } 1530 } 1531 ``` 1532 1533  1534 1535 1536### closePath 1537 1538closePath(): void 1539 1540结束当前路径形成一个封闭路径。 1541 1542**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1543 1544**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1545 1546**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1547 1548 **示例：** 1549 1550 ```ts 1551 // xxx.ets 1552 @Entry 1553 @Component 1554 struct ClosePath { 1555 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1556 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1557 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1558 1559 build() { 1560 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1561 Canvas(this.context) 1562 .width('100%') 1563 .height('100%') 1564 .backgroundColor('#ffff00') 1565 .onReady(() =>{ 1566 let offContext = this.offCanvas.getContext("2d", this.settings) 1567 offContext.beginPath() 1568 offContext.moveTo(30, 30) 1569 offContext.lineTo(110, 30) 1570 offContext.lineTo(70, 90) 1571 offContext.closePath() 1572 offContext.stroke() 1573 let image = this.offCanvas.transferToImageBitmap() 1574 this.context.transferFromImageBitmap(image) 1575 }) 1576 } 1577 .width('100%') 1578 .height('100%') 1579 } 1580 } 1581 ``` 1582 1583  1584 1585 1586### createPattern 1587 1588createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | null 1589 1590通过指定图像和重复方式创建图片填充的模板。 1591 1592**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1593 1594**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1595 1596**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1597 1598**参数：** 1599 1600| 参数名 | 类型 | 必填 | 说明 | 1601| ---------- | ---------------------------------------- | ---- | ---------------------------------------- | 1602| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | 图源对象，具体参考ImageBitmap对象。 | 1603| repetition | string \| null | 是 | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'、'clamp'、'mirror'。 | 1604 1605**返回值：** 1606 1607| 类型 | 说明 | 1608| ---------------------------------------- | ----------------------- | 1609| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) \| null | 通过指定图像和重复方式创建图片填充的模板对象。 | 1610 1611 **示例：** 1612 1613 ```ts 1614 // xxx.ets 1615 @Entry 1616 @Component 1617 struct CreatePattern { 1618 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1619 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1620 private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") 1621 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1622 1623 build() { 1624 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1625 Canvas(this.context) 1626 .width('100%') 1627 .height('100%') 1628 .backgroundColor('#ffff00') 1629 .onReady(() =>{ 1630 let offContext = this.offCanvas.getContext("2d", this.settings) 1631 let pattern = offContext.createPattern(this.img, 'repeat') 1632 offContext.fillStyle = pattern as CanvasPattern 1633 offContext.fillRect(0, 0, 200, 200) 1634 let image = this.offCanvas.transferToImageBitmap() 1635 this.context.transferFromImageBitmap(image) 1636 }) 1637 } 1638 .width('100%') 1639 .height('100%') 1640 } 1641 } 1642 ``` 1643 1644  1645 1646 1647### bezierCurveTo 1648 1649bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void 1650 1651创建三次贝赛尔曲线的路径。 1652 1653**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1654 1655**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1656 1657**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1658 1659 **参数：** 1660 1661| 参数名 | 类型 | 必填 | 说明 | 1662| ---- | ------ | ---- | -------------- | 1663| cp1x | number | 是 | 第一个贝塞尔参数的x坐标值。<br>默认单位：vp。 | 1664| cp1y | number | 是 | 第一个贝塞尔参数的y坐标值。<br>默认单位：vp。 | 1665| cp2x | number | 是 | 第二个贝塞尔参数的x坐标值。<br>默认单位：vp。 | 1666| cp2y | number | 是 | 第二个贝塞尔参数的y坐标值。<br>默认单位：vp。 | 1667| x | number | 是 | 路径结束时的x坐标值。<br>默认单位：vp。 | 1668| y | number | 是 | 路径结束时的y坐标值。<br>默认单位：vp。 | 1669 1670 **示例：** 1671 1672 ```ts 1673 // xxx.ets 1674 @Entry 1675 @Component 1676 struct BezierCurveTo { 1677 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1678 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1679 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1680 1681 build() { 1682 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1683 Canvas(this.context) 1684 .width('100%') 1685 .height('100%') 1686 .backgroundColor('#ffff00') 1687 .onReady(() =>{ 1688 let offContext = this.offCanvas.getContext("2d", this.settings) 1689 offContext.beginPath() 1690 offContext.moveTo(10, 10) 1691 offContext.bezierCurveTo(20, 100, 200, 100, 200, 20) 1692 offContext.stroke() 1693 let image = this.offCanvas.transferToImageBitmap() 1694 this.context.transferFromImageBitmap(image) 1695 }) 1696 } 1697 .width('100%') 1698 .height('100%') 1699 } 1700 } 1701 ``` 1702 1703  1704 1705 1706### quadraticCurveTo 1707 1708quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void 1709 1710创建二次贝赛尔曲线的路径。 1711 1712**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1713 1714**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1715 1716**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1717 1718 **参数：** 1719 1720| 参数名 | 类型 | 必填 | 说明 | 1721| ---- | ------ | ---- | -------------- | 1722| cpx | number | 是 | 贝塞尔参数的x坐标值。<br>默认单位：vp。 | 1723| cpy | number | 是 | 贝塞尔参数的y坐标值。<br>默认单位：vp。 | 1724| x | number | 是 | 路径结束时的x坐标值。<br>默认单位：vp。 | 1725| y | number | 是 | 路径结束时的y坐标值。<br>默认单位：vp。 | 1726 1727 **示例：** 1728 1729 ```ts 1730 // xxx.ets 1731 @Entry 1732 @Component 1733 struct QuadraticCurveTo { 1734 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1735 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1736 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1737 1738 build() { 1739 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1740 Canvas(this.context) 1741 .width('100%') 1742 .height('100%') 1743 .backgroundColor('#ffff00') 1744 .onReady(() =>{ 1745 let offContext = this.offCanvas.getContext("2d", this.settings) 1746 offContext.beginPath() 1747 offContext.moveTo(20, 20) 1748 offContext.quadraticCurveTo(100, 100, 200, 20) 1749 offContext.stroke() 1750 let image = this.offCanvas.transferToImageBitmap() 1751 this.context.transferFromImageBitmap(image) 1752 }) 1753 } 1754 .width('100%') 1755 .height('100%') 1756 } 1757 } 1758 ``` 1759 1760  1761 1762 1763### arc 1764 1765arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void 1766 1767绘制弧线路径。 1768 1769**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1770 1771**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1772 1773**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1774 1775 **参数：** 1776 1777| 参数名 | 类型 | 必填 | 说明 | 1778| ---------------- | ------- | ---- | ---------- | 1779| x | number | 是 | 弧线圆心的x坐标值。<br>默认单位：vp。 | 1780| y | number | 是 | 弧线圆心的y坐标值。<br>默认单位：vp。 | 1781| radius | number | 是 | 弧线的圆半径。<br>默认单位：vp。 | 1782| startAngle | number | 是 | 弧线的起始弧度。<br>默认单位：弧度。 | 1783| endAngle | number | 是 | 弧线的终止弧度。<br>默认单位：弧度。 | 1784| counterclockwise | boolean | 否 | 是否逆时针绘制圆弧。<br>默认值：false。 | 1785 1786 **示例：** 1787 1788 ```ts 1789 // xxx.ets 1790 @Entry 1791 @Component 1792 struct Arc { 1793 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1794 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1795 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1796 1797 build() { 1798 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1799 Canvas(this.context) 1800 .width('100%') 1801 .height('100%') 1802 .backgroundColor('#ffff00') 1803 .onReady(() =>{ 1804 let offContext = this.offCanvas.getContext("2d", this.settings) 1805 offContext.beginPath() 1806 offContext.arc(100, 75, 50, 0, 6.28) 1807 offContext.stroke() 1808 let image = this.offCanvas.transferToImageBitmap() 1809 this.context.transferFromImageBitmap(image) 1810 }) 1811 } 1812 .width('100%') 1813 .height('100%') 1814 } 1815 } 1816 ``` 1817 1818  1819 1820 1821### arcTo 1822 1823arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void 1824 1825依据给定的控制点和圆弧半径创建圆弧路径。 1826 1827**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1828 1829**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1830 1831**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1832 1833 **参数：** 1834 1835| 参数名 | 类型 | 必填 | 说明 | 1836| ------ | ------ | ---- | --------------- | 1837| x1 | number | 是 | 第一个控制点的x坐标值。<br>默认单位：vp。 | 1838| y1 | number | 是 | 第一个控制点的y坐标值。<br>默认单位：vp。 | 1839| x2 | number | 是 | 第二个控制点的x坐标值。<br>默认单位：vp。 | 1840| y2 | number | 是 | 第二个控制点的y坐标值。<br>默认单位：vp。 | 1841| radius | number | 是 | 圆弧的圆半径值。<br>默认单位：vp。 | 1842 1843 **示例：** 1844 1845 ```ts 1846 // xxx.ets 1847 @Entry 1848 @Component 1849 struct ArcTo { 1850 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1851 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1852 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1853 1854 build() { 1855 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1856 Canvas(this.context) 1857 .width('100%') 1858 .height('100%') 1859 .backgroundColor('#ffff00') 1860 .onReady(() =>{ 1861 let offContext = this.offCanvas.getContext("2d", this.settings) 1862 1863 // 切线 1864 offContext.beginPath() 1865 offContext.strokeStyle = '#808080' 1866 offContext.lineWidth = 1.5; 1867 offContext.moveTo(360, 20); 1868 offContext.lineTo(360, 170); 1869 offContext.lineTo(110, 170); 1870 offContext.stroke(); 1871 1872 // 圆弧 1873 offContext.beginPath() 1874 offContext.strokeStyle = '#000000' 1875 offContext.lineWidth = 3; 1876 offContext.moveTo(360, 20) 1877 offContext.arcTo(360, 170, 110, 170, 150) 1878 offContext.stroke() 1879 1880 // 起始点 1881 offContext.beginPath(); 1882 offContext.fillStyle = '#00ff00'; 1883 offContext.arc(360, 20, 4, 0, 2 * Math.PI); 1884 offContext.fill(); 1885 1886 // 控制点 1887 offContext.beginPath(); 1888 offContext.fillStyle = '#ff0000'; 1889 offContext.arc(360, 170, 4, 0, 2 * Math.PI); 1890 offContext.arc(110, 170, 4, 0, 2 * Math.PI); 1891 offContext.fill(); 1892 1893 let image = this.offCanvas.transferToImageBitmap() 1894 this.context.transferFromImageBitmap(image) 1895 }) 1896 } 1897 .width('100%') 1898 .height('100%') 1899 } 1900 } 1901 ``` 1902 1903  1904 1905 > 此示例中，arcTo()创建的圆弧为黑色，圆弧的两条切线为灰色。控制点为红色，起始点为绿色。 1906 > 1907 > 可以想象两条切线：一条切线从起始点到第一个控制点，另一条切线从第一个控制点到第二个控制点。arcTo()在这两条切线间创建一个圆弧，并使圆弧与这两条切线都相切。 1908 1909 1910### ellipse 1911 1912ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void 1913 1914在规定的矩形区域绘制一个椭圆。 1915 1916**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1917 1918**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1919 1920**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1921 1922 **参数：** 1923 1924| 参数名 | 类型 | 必填 | 说明 | 1925| ---------------- | ------- | ---- | ---------------------------------------- | 1926| x | number | 是 | 椭圆圆心的x轴坐标。<br>默认单位：vp。 | 1927| y | number | 是 | 椭圆圆心的y轴坐标。<br>默认单位：vp。 | 1928| radiusX | number | 是 | 椭圆x轴的半径长度。<br>默认单位：vp。 | 1929| radiusY | number | 是 | 椭圆y轴的半径长度。<br>默认单位：vp。 | 1930| rotation | number | 是 | 椭圆的旋转角度。<br>单位为弧度。 | 1931| startAngle | number | 是 | 椭圆绘制的起始点角度。<br>单位为弧度。 | 1932| endAngle | number | 是 | 椭圆绘制的结束点角度。<br>单位为弧度。 | 1933| counterclockwise | boolean | 否 | 是否以逆时针方向绘制椭圆。<br>true:逆时针方向绘制椭圆。<br>false:顺时针方向绘制椭圆。<br>默认值：false。 | 1934 1935 **示例：** 1936 1937 ```ts 1938 // xxx.ets 1939 @Entry 1940 @Component 1941 struct CanvasExample { 1942 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1943 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1944 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1945 build() { 1946 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1947 Canvas(this.context) 1948 .width('100%') 1949 .height('100%') 1950 .backgroundColor('#ffff00') 1951 .onReady(() =>{ 1952 let offContext = this.offCanvas.getContext("2d", this.settings) 1953 offContext.beginPath() 1954 offContext.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI * 2, false) 1955 offContext.stroke() 1956 offContext.beginPath() 1957 offContext.ellipse(200, 300, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI * 2, true) 1958 offContext.stroke() 1959 let image = this.offCanvas.transferToImageBitmap() 1960 this.context.transferFromImageBitmap(image) 1961 }) 1962 } 1963 .width('100%') 1964 .height('100%') 1965 } 1966 } 1967 ``` 1968 1969  1970 1971 1972### rect 1973 1974rect(x: number, y: number, w: number, h: number): void 1975 1976创建矩形路径。 1977 1978**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1979 1980**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1981 1982**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1983 1984 **参数：** 1985 1986| 参数名 | 类型 | 必填 | 说明 | 1987| ---- | ------ | ---- | ------------- | 1988| x | number | 是 | 指定矩形的左上角x坐标值。<br>默认单位：vp。 | 1989| y | number | 是 | 指定矩形的左上角y坐标值。<br>默认单位：vp。 | 1990| w | number | 是 | 指定矩形的宽度。<br>默认单位：vp。 | 1991| h | number | 是 | 指定矩形的高度。<br>默认单位：vp。 | 1992 1993 **示例：** 1994 1995 ```ts 1996 // xxx.ets 1997 @Entry 1998 @Component 1999 struct CanvasExample { 2000 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2001 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2002 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2003 2004 build() { 2005 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2006 Canvas(this.context) 2007 .width('100%') 2008 .height('100%') 2009 .backgroundColor('#ffff00') 2010 .onReady(() =>{ 2011 let offContext = this.offCanvas.getContext("2d", this.settings) 2012 offContext.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20) 2013 offContext.stroke() 2014 let image = this.offCanvas.transferToImageBitmap() 2015 this.context.transferFromImageBitmap(image) 2016 }) 2017 } 2018 .width('100%') 2019 .height('100%') 2020 } 2021 } 2022 ``` 2023 2024  2025 2026 2027### fill 2028 2029fill(fillRule?: CanvasFillRule): void 2030 2031对封闭路径进行填充。 2032 2033**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2034 2035**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2036 2037**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2038 2039**参数:** 2040 2041| 参数名 | 类型 | 必填 | 说明 | 2042| -------- | -------------- | ---- | ---------------------------------------- | 2043| fillRule | [CanvasFillRule](ts-canvasrenderingcontext2d.md#canvasfillrule) | 否 | 指定要填充对象的规则。<br/>可选参数为："nonzero", "evenodd"。<br>默认值："nonzero"。 | 2044 2045 ```ts 2046 // xxx.ets 2047 @Entry 2048 @Component 2049 struct Fill { 2050 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2051 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2052 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2053 2054 build() { 2055 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2056 Canvas(this.context) 2057 .width('100%') 2058 .height('100%') 2059 .backgroundColor('#ffff00') 2060 .onReady(() =>{ 2061 let offContext = this.offCanvas.getContext("2d", this.settings) 2062 offContext.fillStyle = '#000000' 2063 offContext.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20) 2064 offContext.fill() 2065 let image = this.offCanvas.transferToImageBitmap() 2066 this.context.transferFromImageBitmap(image) 2067 }) 2068 } 2069 .width('100%') 2070 .height('100%') 2071 } 2072 } 2073 ``` 2074 2075  2076 2077 2078fill(path: Path2D, fillRule?: CanvasFillRule): void 2079 2080对封闭路径进行填充。 2081 2082**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2083 2084**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2085 2086**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2087 2088**参数:** 2089 2090| 参数名 | 类型 | 必填 | 说明 | 2091| -------- | -------------- | ---- | ----------------- | 2092| path | [Path2D](ts-components-canvas-path2d.md) | 是 | Path2D填充路径。 | 2093| fillRule | [CanvasFillRule](ts-canvasrenderingcontext2d.md#canvasfillrule) | 否 | 指定要填充对象的规则。<br/>可选参数为："nonzero", "evenodd"。<br>默认值："nonzero"。 | 2094 2095**示例:** 2096 2097```ts 2098// xxx.ets 2099@Entry 2100@Component 2101struct Fill { 2102 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2103 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2104 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2105 2106 build() { 2107 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2108 Canvas(this.context) 2109 .width('100%') 2110 .height('100%') 2111 .backgroundColor('#ffff00') 2112 .onReady(() =>{ 2113 let offContext = this.offCanvas.getContext("2d", this.settings) 2114 let region = new Path2D() 2115 region.moveTo(30, 90) 2116 region.lineTo(110, 20) 2117 region.lineTo(240, 130) 2118 region.lineTo(60, 130) 2119 region.lineTo(190, 20) 2120 region.lineTo(270, 90) 2121 region.closePath() 2122 // Fill path 2123 offContext.fillStyle = '#00ff00' 2124 offContext.fill(region, "evenodd") 2125 let image = this.offCanvas.transferToImageBitmap() 2126 this.context.transferFromImageBitmap(image) 2127 }) 2128 } 2129 .width('100%') 2130 .height('100%') 2131 } 2132} 2133``` 2134 2135  2136 2137 2138 2139### clip 2140 2141clip(fillRule?: CanvasFillRule): void 2142 2143设置当前路径为剪切路径。 2144 2145**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2146 2147**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2148 2149**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2150 2151**参数:** 2152 2153| 参数名 | 类型 | 必填 | 说明 | 2154| -------- | -------------- | ---- | ---------------------------------------- | 2155| fillRule | [CanvasFillRule](ts-canvasrenderingcontext2d.md#canvasfillrule) | 否 | 指定要剪切对象的规则。<br/>可选参数为："nonzero", "evenodd"。<br>默认值："nonzero"。 | 2156 2157 **示例：** 2158 2159 ```ts 2160 // xxx.ets 2161 @Entry 2162 @Component 2163 struct Clip { 2164 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2165 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2166 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2167 2168 build() { 2169 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2170 Canvas(this.context) 2171 .width('100%') 2172 .height('100%') 2173 .backgroundColor('#ffff00') 2174 .onReady(() =>{ 2175 let offContext = this.offCanvas.getContext("2d", this.settings) 2176 offContext.rect(0, 0, 100, 200) 2177 offContext.stroke() 2178 offContext.clip() 2179 offContext.fillStyle = "rgb(255,0,0)" 2180 offContext.fillRect(0, 0, 200, 200) 2181 let image = this.offCanvas.transferToImageBitmap() 2182 this.context.transferFromImageBitmap(image) 2183 }) 2184 } 2185 .width('100%') 2186 .height('100%') 2187 } 2188 } 2189 ``` 2190 2191  2192 2193 2194clip(path: Path2D, fillRule?: CanvasFillRule): void 2195 2196设置封闭路径为剪切路径。 2197 2198**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2199 2200**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2201 2202**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2203 2204**参数:** 2205 2206| 参数名 | 类型 | 必填 | 描述 | 2207| -------- | -------------- | ---- | ---------------------------------------- | 2208| path | [Path2D](ts-components-canvas-path2d.md) | 是 | Path2D剪切路径。 | 2209| fillRule | [CanvasFillRule](ts-canvasrenderingcontext2d.md#canvasfillrule) | 否 | 指定要剪切对象的规则。<br/>可选参数为："nonzero", "evenodd"。<br>默认值："nonzero"。 | 2210 2211 **示例：** 2212 2213 ```ts 2214 // xxx.ets 2215 @Entry 2216 @Component 2217 struct Clip { 2218 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2219 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2220 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2221 2222 build() { 2223 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2224 Canvas(this.context) 2225 .width('100%') 2226 .height('100%') 2227 .backgroundColor('#ffff00') 2228 .onReady(() =>{ 2229 let offContext = this.offCanvas.getContext("2d", this.settings) 2230 let region = new Path2D() 2231 region.moveTo(30, 90) 2232 region.lineTo(110, 20) 2233 region.lineTo(240, 130) 2234 region.lineTo(60, 130) 2235 region.lineTo(190, 20) 2236 region.lineTo(270, 90) 2237 region.closePath() 2238 offContext.clip(region,"evenodd") 2239 offContext.fillStyle = "rgb(0,255,0)" 2240 offContext.fillRect(0, 0, 600, 600) 2241 let image = this.offCanvas.transferToImageBitmap() 2242 this.context.transferFromImageBitmap(image) 2243 }) 2244 } 2245 .width('100%') 2246 .height('100%') 2247 } 2248 } 2249 ``` 2250 2251  2252 2253 2254### reset<sup>12+</sup> 2255 2256reset(): void 2257 2258将OffscreenCanvasRenderingContext2D重置为其默认状态，清除后台缓冲区、绘制状态栈、绘制路径和样式。 2259 2260**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2261 2262**示例：** 2263 2264 ```ts 2265 // xxx.ets 2266 @Entry 2267 @Component 2268 struct Reset { 2269 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2270 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2271 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2272 2273 build() { 2274 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2275 Canvas(this.context) 2276 .width('100%') 2277 .height('100%') 2278 .backgroundColor('#ffff00') 2279 .onReady(() =>{ 2280 let offContext = this.offCanvas.getContext("2d", this.settings) 2281 offContext.fillStyle = '#0000ff' 2282 offContext.fillRect(20, 20, 150, 100) 2283 offContext.reset() 2284 offContext.fillRect(20, 150, 150, 100) 2285 let image = this.offCanvas.transferToImageBitmap() 2286 this.context.transferFromImageBitmap(image) 2287 }) 2288 } 2289 .width('100%') 2290 .height('100%') 2291 } 2292 } 2293 ``` 2294 2295  2296 2297### saveLayer<sup>12+</sup> 2298 2299saveLayer(): void 2300 2301创建一个图层。 2302 2303**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2304 2305**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2306 2307**示例：** 2308 2309 ```ts 2310 // xxx.ets 2311 @Entry 2312 @Component 2313 struct ResetTransform { 2314 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2315 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2316 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2317 2318 build() { 2319 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2320 Canvas(this.context) 2321 .width('100%') 2322 .height('100%') 2323 .backgroundColor('#ffff00') 2324 .onReady(() => { 2325 let offContext = this.offCanvas.getContext("2d", this.settings) 2326 offContext.setTransform(1,0.5, -0.5, 1, 10, 10) 2327 offContext.fillStyle = 'rgb(0,0,255)' 2328 offContext.fillRect(0, 0, 100, 100) 2329 offContext.resetTransform() 2330 offContext.fillStyle = 'rgb(255,0,0)' 2331 offContext.fillRect(0, 0, 100, 100) 2332 let image = this.offCanvas.transferToImageBitmap() 2333 this.context.transferFromImageBitmap(image) 2334 }) 2335 } 2336 .width('100%') 2337 .height('100%') 2338 } 2339 } 2340 ``` 2341  2342 2343### restoreLayer<sup>12+</sup> 2344 2345restoreLayer(): void 2346 2347恢复图像变换和裁剪状态至saveLayer前的状态，并将图层绘制在canvas上。restoreLayer示例同saveLayer。 2348 2349**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2350 2351**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2352 2353### resetTransform 2354 2355resetTransform(): void 2356 2357使用单位矩阵重新设置当前矩阵。 2358 2359**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2360 2361**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2362 2363**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2364 2365**示例：** 2366 2367 ```ts 2368 // xxx.ets 2369 @Entry 2370 @Component 2371 struct ResetTransform { 2372 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2373 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2374 2375 build() { 2376 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2377 Canvas(this.context) 2378 .width('100%') 2379 .height('100%') 2380 .backgroundColor('#ffff00') 2381 .onReady(() =>{ 2382 this.context.setTransform(1,0.5, -0.5, 1, 10, 10) 2383 this.context.fillStyle = 'rgb(0,0,255)' 2384 this.context.fillRect(0, 0, 100, 100) 2385 this.context.resetTransform() 2386 this.context.fillStyle = 'rgb(255,0,0)' 2387 this.context.fillRect(0, 0, 100, 100) 2388 }) 2389 } 2390 .width('100%') 2391 .height('100%') 2392 } 2393 } 2394 ``` 2395 2396### rotate 2397 2398rotate(angle: number): void 2399 2400针对当前坐标轴进行顺时针旋转。 2401 2402**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2403 2404**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2405 2406**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2407 2408 **参数：** 2409 2410| 参数名 | 类型 | 必填 | 说明 | 2411| ----- | ------ | ---- | ---------------------------------------- | 2412| angle | number | 是 | 设置顺时针旋转的弧度值，可以通过 degree * Math.PI / 180 将角度转换为弧度值。<br>单位：弧度。 | 2413 2414 **示例：** 2415 2416 ```ts 2417 // xxx.ets 2418 @Entry 2419 @Component 2420 struct Rotate { 2421 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2422 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2423 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2424 2425 build() { 2426 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2427 Canvas(this.context) 2428 .width('100%') 2429 .height('100%') 2430 .backgroundColor('#ffff00') 2431 .onReady(() =>{ 2432 let offContext = this.offCanvas.getContext("2d", this.settings) 2433 offContext.rotate(45 * Math.PI / 180) 2434 offContext.fillRect(70, 20, 50, 50) 2435 let image = this.offCanvas.transferToImageBitmap() 2436 this.context.transferFromImageBitmap(image) 2437 }) 2438 } 2439 .width('100%') 2440 .height('100%') 2441 } 2442 } 2443 ``` 2444 2445  2446 2447 2448### scale 2449 2450scale(x: number, y: number): void 2451 2452设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。 2453 2454**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2455 2456**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2457 2458**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2459 2460 **参数：** 2461 2462| 参数名 | 类型 | 必填 | 说明 | 2463| ---- | ------ | ---- | ----------- | 2464| x | number | 是 | 设置水平方向的缩放值。 | 2465| y | number | 是 | 设置垂直方向的缩放值。 | 2466 2467 **示例：** 2468 2469 ```ts 2470 // xxx.ets 2471 @Entry 2472 @Component 2473 struct Scale { 2474 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2475 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2476 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2477 2478 build() { 2479 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2480 Canvas(this.context) 2481 .width('100%') 2482 .height('100%') 2483 .backgroundColor('#ffff00') 2484 .onReady(() =>{ 2485 let offContext = this.offCanvas.getContext("2d", this.settings) 2486 offContext.lineWidth = 3 2487 offContext.strokeRect(30, 30, 50, 50) 2488 offContext.scale(2, 2) // Scale to 200% 2489 offContext.strokeRect(30, 30, 50, 50) 2490 let image = this.offCanvas.transferToImageBitmap() 2491 this.context.transferFromImageBitmap(image) 2492 }) 2493 } 2494 .width('100%') 2495 .height('100%') 2496 } 2497 } 2498 ``` 2499 2500  2501 2502 2503### transform 2504 2505transform(a: number, b: number, c: number, d: number, e: number, f: number): void 2506 2507transform方法对应一个变换矩阵，想对一个图形进行变化的时候，只要设置此变换矩阵相应的参数，对图形的各个定点的坐标分别乘以这个矩阵，就能得到新的定点的坐标。矩阵变换效果可叠加。 2508 2509**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2510 2511**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2512 2513**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2514 2515> **说明：** 2516> 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标)： 2517> 2518> - x' = scaleX \* x + skewY \* y + translateX 2519> 2520> - y' = skewX \* x + scaleY \* y + translateY 2521 2522**参数：** 2523 2524| 参数名 | 类型 | 必填 | 说明 | 2525| ---- | ------ | ---- | -------------------- | 2526| a | number | 是 | scaleX: 指定水平缩放值。 | 2527| b | number | 是 | skewY: 指定垂直倾斜值。 | 2528| c | number | 是 | skewX: 指定水平倾斜值。 | 2529| d | number | 是 | scaleY: 指定垂直缩放值。 | 2530| e | number | 是 | translateX: 指定水平移动值。<br>默认单位：vp。 | 2531| f | number | 是 | translateY: 指定垂直移动值。<br>默认单位：vp。 | 2532 2533 **示例：** 2534 2535 ```ts 2536 // xxx.ets 2537 @Entry 2538 @Component 2539 struct Transform { 2540 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2541 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2542 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2543 2544 build() { 2545 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2546 Canvas(this.context) 2547 .width('100%') 2548 .height('100%') 2549 .backgroundColor('#ffff00') 2550 .onReady(() =>{ 2551 let offContext = this.offCanvas.getContext("2d", this.settings) 2552 offContext.fillStyle = 'rgb(0,0,0)' 2553 offContext.fillRect(0, 0, 100, 100) 2554 offContext.transform(1, 0.5, -0.5, 1, 10, 10) 2555 offContext.fillStyle = 'rgb(255,0,0)' 2556 offContext.fillRect(0, 0, 100, 100) 2557 offContext.transform(1, 0.5, -0.5, 1, 10, 10) 2558 offContext.fillStyle = 'rgb(0,0,255)' 2559 offContext.fillRect(0, 0, 100, 100) 2560 let image = this.offCanvas.transferToImageBitmap() 2561 this.context.transferFromImageBitmap(image) 2562 }) 2563 } 2564 .width('100%') 2565 .height('100%') 2566 } 2567 } 2568 ``` 2569 2570  2571 2572 2573### setTransform 2574 2575setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void 2576 2577setTransform方法使用的参数和transform()方法相同，但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。 2578 2579**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2580 2581**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2582 2583**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2584 2585**参数：** 2586 2587| 参数名 | 类型 | 必填 | 描述 | 2588| ---- | ------ | ---- | -------------------- | 2589| a | number | 是 | scaleX: 指定水平缩放值。 | 2590| b | number | 是 | skewY: 指定垂直倾斜值。 | 2591| c | number | 是 | skewX: 指定水平倾斜值。 | 2592| d | number | 是 | scaleY: 指定垂直缩放值。 | 2593| e | number | 是 | translateX: 指定水平移动值。<br>默认单位：vp。 | 2594| f | number | 是 | translateY: 指定垂直移动值。<br>默认单位：vp。 | 2595 2596 **示例：** 2597 2598 ```ts 2599 // xxx.ets 2600 @Entry 2601 @Component 2602 struct SetTransform { 2603 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2604 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2605 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2606 2607 build() { 2608 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2609 Canvas(this.context) 2610 .width('100%') 2611 .height('100%') 2612 .backgroundColor('#ffff00') 2613 .onReady(() =>{ 2614 let offContext = this.offCanvas.getContext("2d", this.settings) 2615 offContext.fillStyle = 'rgb(255,0,0)' 2616 offContext.fillRect(0, 0, 100, 100) 2617 offContext.setTransform(1,0.5, -0.5, 1, 10, 10) 2618 offContext.fillStyle = 'rgb(0,0,255)' 2619 offContext.fillRect(0, 0, 100, 100) 2620 let image = this.offCanvas.transferToImageBitmap() 2621 this.context.transferFromImageBitmap(image) 2622 }) 2623 } 2624 .width('100%') 2625 .height('100%') 2626 } 2627 } 2628 ``` 2629 2630  2631 2632 2633### setTransform 2634 2635setTransform(transform?: Matrix2D): void 2636 2637以Matrix2D对象为模板重置现有的变换矩阵并创建新的变换矩阵。 2638 2639**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2640 2641**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2642 2643**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2644 2645**参数：** 2646 2647| 参数名 | 类型 | 必填 | 描述 | 2648| --------- | ---------------------------------------- | ---- | ----- | 2649| transform | [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | 否 | 变换矩阵。<br>默认值：null。 | 2650 2651**示例：** 2652 ```ts 2653 // xxx.ets 2654 @Entry 2655 @Component 2656 struct TransFormDemo { 2657 private settings: RenderingContextSettings = new RenderingContextSettings(true); 2658 private context1: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2659 private offcontext1: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 200, this.settings); 2660 private context2: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2661 private offcontext2: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 200, this.settings); 2662 2663 build() { 2664 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2665 Text('context1'); 2666 Canvas(this.context1) 2667 .width('230vp') 2668 .height('160vp') 2669 .backgroundColor('#ffff00') 2670 .onReady(() =>{ 2671 this.offcontext1.fillRect(100, 20, 50, 50); 2672 this.offcontext1.setTransform(1, 0.5, -0.5, 1, 10, 10); 2673 this.offcontext1.fillRect(100, 20, 50, 50); 2674 let image = this.offcontext1.transferToImageBitmap(); 2675 this.context1.transferFromImageBitmap(image); 2676 }) 2677 Text('context2'); 2678 Canvas(this.context2) 2679 .width('230vp') 2680 .height('160vp') 2681 .backgroundColor('#0ffff0') 2682 .onReady(() =>{ 2683 this.offcontext2.fillRect(100, 20, 50, 50); 2684 let storedTransform = this.offcontext1.getTransform(); 2685 this.offcontext2.setTransform(storedTransform); 2686 this.offcontext2.fillRect(100, 20, 50, 50); 2687 let image = this.offcontext2.transferToImageBitmap(); 2688 this.context2.transferFromImageBitmap(image); 2689 }) 2690 } 2691 .width('100%') 2692 .height('100%') 2693 } 2694 } 2695 ``` 2696  2697 2698### getTransform 2699 2700getTransform(): Matrix2D 2701 2702获取当前被应用到上下文的转换矩阵。 2703 2704**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2705 2706**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2707 2708**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2709 2710**返回值：** 2711 2712| 类型 | 说明 | 2713| ---------------------------------------- | ----- | 2714| [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | 矩阵对象。 | 2715 2716**示例：** 2717 2718 ```ts 2719 // xxx.ets 2720 @Entry 2721 @Component 2722 struct TransFormDemo { 2723 private settings: RenderingContextSettings = new RenderingContextSettings(true); 2724 private context1: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2725 private offcontext1: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 100, this.settings); 2726 private context2: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2727 private offcontext2: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 100, this.settings); 2728 2729 build() { 2730 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2731 Text('context1'); 2732 Canvas(this.context1) 2733 .width('230vp') 2734 .height('120vp') 2735 .backgroundColor('#ffff00') 2736 .onReady(() =>{ 2737 this.offcontext1.fillRect(50, 50, 50, 50); 2738 this.offcontext1.setTransform(1.2, Math.PI/8, Math.PI/6, 0.5, 30, -25); 2739 this.offcontext1.fillRect(50, 50, 50, 50); 2740 let image = this.offcontext1.transferToImageBitmap(); 2741 this.context1.transferFromImageBitmap(image); 2742 }) 2743 Text('context2'); 2744 Canvas(this.context2) 2745 .width('230vp') 2746 .height('120vp') 2747 .backgroundColor('#0ffff0') 2748 .onReady(() =>{ 2749 this.offcontext2.fillRect(50, 50, 50, 50); 2750 let storedTransform = this.offcontext1.getTransform(); 2751 console.log("Matrix [scaleX = " + storedTransform.scaleX + ", scaleY = " + storedTransform.scaleY + 2752 ", rotateX = " + storedTransform.rotateX + ", rotateY = " + storedTransform.rotateY + 2753 ", translateX = " + storedTransform.translateX + ", translateY = " + storedTransform.translateY + "]") 2754 this.offcontext2.setTransform(storedTransform); 2755 this.offcontext2.fillRect(50,50,50,50); 2756 let image = this.offcontext2.transferToImageBitmap(); 2757 this.context2.transferFromImageBitmap(image); 2758 }) 2759 } 2760 .width('100%') 2761 .height('100%') 2762 } 2763 } 2764 ``` 2765 2766  2767 2768### translate 2769 2770translate(x: number, y: number): void 2771 2772移动当前坐标系的原点。 2773 2774**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2775 2776**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2777 2778**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2779 2780 **参数：** 2781 2782| 参数名 | 类型 | 必填 | 说明 | 2783| ---- | ------ | ---- | -------- | 2784| x | number | 是 | 设置水平平移量。<br>默认单位：vp。 | 2785| y | number | 是 | 设置竖直平移量。<br>默认单位：vp。 | 2786 2787 **示例：** 2788 2789 ```ts 2790 // xxx.ets 2791 @Entry 2792 @Component 2793 struct Translate { 2794 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2795 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2796 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2797 2798 build() { 2799 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2800 Canvas(this.context) 2801 .width('100%') 2802 .height('100%') 2803 .backgroundColor('#ffff00') 2804 .onReady(() =>{ 2805 let offContext = this.offCanvas.getContext("2d", this.settings) 2806 offContext.fillRect(10, 10, 50, 50) 2807 offContext.translate(70, 70) 2808 offContext.fillRect(10, 10, 50, 50) 2809 let image = this.offCanvas.transferToImageBitmap() 2810 this.context.transferFromImageBitmap(image) 2811 }) 2812 } 2813 .width('100%') 2814 .height('100%') 2815 } 2816 } 2817 ``` 2818 2819  2820 2821 2822### drawImage 2823 2824drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number): void 2825 2826进行图像绘制。 2827 2828**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用，卡片中不支持PixelMap对象。 2829 2830**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2831 2832**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2833 2834 **参数：** 2835 2836| 参数 | 类型 | 必填 | 说明 | 2837| ----- | ---------------------------------------- | ---- | ----------------------------- | 2838| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) 或[PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7) | 是 | 图片资源，请参考ImageBitmap或PixelMap。 | 2839| dx | number | 是 | 绘制区域左上角在x轴的位置。<br>默认单位：vp。 | 2840| dy | number | 是 | 绘制区域左上角在y 轴的位置。<br>默认单位：vp。 | 2841 2842drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number, dw: number, dh: number): void 2843 2844进行图像绘制。 2845 2846**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用，卡片中不支持PixelMap对象。 2847 2848**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2849 2850**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2851 2852 **参数：** 2853 2854| 参数 | 类型 | 必填 | 说明 | 2855| ----- | ---------------------------------------- | ---- | ----------------------------- | 2856| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) 或[PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7) | 是 | 图片资源，请参考ImageBitmap或PixelMap。 | 2857| dx | number | 是 | 绘制区域左上角在x轴的位置。<br>默认单位：vp。 | 2858| dy | number | 是 | 绘制区域左上角在y 轴的位置。<br>默认单位：vp。 | 2859| dw | number | 是 | 绘制区域的宽度。<br>默认单位：vp。 | 2860| dh | number | 是 | 绘制区域的高度。<br>默认单位：vp。 | 2861 2862drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void 2863 2864进行图像绘制。 2865 2866**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用，卡片中不支持PixelMap对象。 2867 2868**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2869 2870**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2871 2872 **参数：** 2873 2874| 参数 | 类型 | 必填 | 说明 | 2875| ----- | ---------------------------------------- | ---- | ----------------------------- | 2876| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) 或[PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7) | 是 | 图片资源，请参考ImageBitmap或PixelMap。 | 2877| sx | number | 是 | 裁切源图像时距离源图像左上角的x坐标值。<br>image类型为ImageBitmap时，默认单位：vp。<br>image类型为PixelMap时，单位：px。 | 2878| sy | number | 是 | 裁切源图像时距离源图像左上角的y坐标值。<br>image类型为ImageBitmap时，默认单位：vp。<br>image类型为PixelMap时，单位：px。 | 2879| sw | number | 是 | 裁切源图像时需要裁切的宽度。<br>image类型为ImageBitmap时，默认单位：vp。<br>image类型为PixelMap时，单位：px。 | 2880| sh | number | 是 | 裁切源图像时需要裁切的高度。<br>image类型为ImageBitmap时，默认单位：vp。<br>image类型为PixelMap时，单位：px。 | 2881| dx | number | 是 | 绘制区域左上角在x轴的位置。<br>默认单位：vp。 | 2882| dy | number | 是 | 绘制区域左上角在y轴的位置。<br>默认单位：vp。 | 2883| dw | number | 是 | 绘制区域的宽度。<br>默认单位：vp。 | 2884| dh | number | 是 | 绘制区域的高度。<br>默认单位：vp。 | 2885 2886 **示例：** 2887 2888 ```ts 2889 // xxx.ets 2890 @Entry 2891 @Component 2892 struct DrawImage { 2893 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2894 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2895 private img:ImageBitmap = new ImageBitmap("common/images/example.jpg") 2896 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2897 build() { 2898 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2899 Canvas(this.context) 2900 .width('100%') 2901 .height('100%') 2902 .backgroundColor('#ffff00') 2903 .onReady(() => { 2904 let offContext = this.offCanvas.getContext("2d", this.settings) 2905 offContext.drawImage(this.img, 0, 0) 2906 offContext.drawImage(this.img, 0, 150, 300, 100) 2907 offContext.drawImage(this.img, 0, 0, 500, 500, 0, 300, 400, 200) 2908 let image = this.offCanvas.transferToImageBitmap() 2909 this.context.transferFromImageBitmap(image) 2910 }) 2911 } 2912 .width('100%') 2913 .height('100%') 2914 } 2915 } 2916 ``` 2917 2918  2919 2920 2921### createImageData 2922 2923createImageData(sw: number, sh: number): ImageData 2924 2925根据当前ImageData对象重新创建一个宽、高相同的ImageData对象，请参考[ImageData](ts-components-canvas-imagedata.md)，该接口存在内存拷贝行为，高耗时，应避免频繁使用。createImageData示例同putImageData。 2926 2927**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2928 2929**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2930 2931**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2932 2933 **参数：** 2934 2935| 参数名 | 类型 | 必填 | 说明 | 2936| ---- | ------ | ---- | ------------- | 2937| sw | number | 是 | ImageData的宽度。<br>默认单位：vp。 | 2938| sh | number | 是 | ImageData的高度。<br>默认单位：vp。 | 2939 2940 2941createImageData(imageData: ImageData): ImageData 2942 2943根据已创建的ImageData对象创建新的ImageData对象（不会复制图像数据），请参考[ImageData](ts-components-canvas-imagedata.md)，该接口存在内存拷贝行为，高耗时，应避免频繁使用。createImageData示例同putImageData。 2944 2945**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2946 2947 **参数：** 2948 2949| 参数名 | 类型 | 必填 | 说明 | 2950| --------- | ---------------------------------------- | ---- | ---------------- | 2951| imagedata | [ImageData](ts-components-canvas-imagedata.md) | 是 | 被复制的ImageData对象。 | 2952 2953 **返回值：** 2954 2955| 类型 | 说明 | 2956| ---------------------------------------- | ------------- | 2957| [ImageData](ts-components-canvas-imagedata.md) | 新的ImageData对象 | 2958 2959### getPixelMap 2960 2961getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap 2962 2963以当前canvas指定区域内的像素创建[PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7)对象，该接口存在内存拷贝行为，高耗时，应避免频繁使用。 2964 2965**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2966 2967**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2968 2969 **参数：** 2970 2971| 参数 | 类型 | 必填 | 说明 | 2972| ---- | ------ | ---- | --------------- | 2973| sx | number | 是 | 需要输出的区域的左上角x坐标。<br>默认单位：vp。 | 2974| sy | number | 是 | 需要输出的区域的左上角y坐标。<br>默认单位：vp。 | 2975| sw | number | 是 | 需要输出的区域的宽度。<br>默认单位：vp。 | 2976| sh | number | 是 | 需要输出的区域的高度。<br>默认单位：vp。 | 2977 2978**返回值：** 2979 2980| 类型 | 说明 | 2981| ---------------------------------------- | ------------ | 2982| [PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7) | 新的PixelMap对象 | 2983 2984**示例：** 2985 2986 ```ts 2987 // xxx.ets 2988 @Entry 2989 @Component 2990 struct GetPixelMap { 2991 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2992 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2993 private img: ImageBitmap = new ImageBitmap("common/images/example.jpg") 2994 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2995 2996 build() { 2997 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2998 Canvas(this.context) 2999 .width('100%') 3000 .height('100%') 3001 .backgroundColor('#ffff00') 3002 .onReady(() => { 3003 let offContext = this.offCanvas.getContext("2d", this.settings) 3004 offContext.drawImage(this.img, 100, 100, 130, 130) 3005 let pixelmap = offContext.getPixelMap(150, 150, 130, 130) 3006 offContext.setPixelMap(pixelmap) 3007 let image = this.offCanvas.transferToImageBitmap() 3008 this.context.transferFromImageBitmap(image) 3009 }) 3010 } 3011 .width('100%') 3012 .height('100%') 3013 } 3014 } 3015 ``` 3016 3017  3018 3019### setPixelMap 3020 3021setPixelMap(value?: PixelMap): void 3022 3023将当前传入[PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7)对象绘制在画布上。setPixelMap示例同getPixelMap。 3024 3025**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3026 3027**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3028 3029 **参数：** 3030 3031| 参数名 | 类型 | 必填 | 说明 | 3032| ---- | ------ | ---- | --------------- | 3033| value | [PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7) | 否 | 包含像素值的PixelMap对象<br>默认值：null。 | 3034 3035 3036### getImageData 3037 3038getImageData(sx: number, sy: number, sw: number, sh: number): ImageData 3039 3040以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagedata.md)对象，该接口存在内存拷贝行为，高耗时，应避免频繁使用。 3041 3042**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3043 3044**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3045 3046**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3047 3048 **参数：** 3049 3050| 参数名 | 类型 | 必填 | 说明 | 3051| ---- | ------ | ---- | --------------- | 3052| sx | number | 是 | 需要输出的区域的左上角x坐标。<br>默认单位：vp。 | 3053| sy | number | 是 | 需要输出的区域的左上角y坐标。<br>默认单位：vp。 | 3054| sw | number | 是 | 需要输出的区域的宽度。<br>默认单位：vp。 | 3055| sh | number | 是 | 需要输出的区域的高度。<br>默认单位：vp。 | 3056 3057 **返回值：** 3058 3059| 类型 | 说明 | 3060| ---------------------------------------- | ------------- | 3061| [ImageData](ts-components-canvas-imagedata.md) | 新的ImageData对象 | 3062 3063 3064**示例：** 3065 3066 ```ts 3067 // xxx.ets 3068 @Entry 3069 @Component 3070 struct GetImageData { 3071 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3072 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3073 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 3074 private img:ImageBitmap = new ImageBitmap("/common/images/1234.png") 3075 3076 build() { 3077 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3078 Canvas(this.context) 3079 .width('100%') 3080 .height('100%') 3081 .backgroundColor('#ffff00') 3082 .onReady(() =>{ 3083 let offContext = this.offCanvas.getContext("2d", this.settings) 3084 offContext.drawImage(this.img,0,0,130,130) 3085 let imagedata = offContext.getImageData(50,50,130,130) 3086 offContext.putImageData(imagedata,150,150) 3087 let image = this.offCanvas.transferToImageBitmap() 3088 this.context.transferFromImageBitmap(image) 3089 }) 3090 } 3091 .width('100%') 3092 .height('100%') 3093 } 3094 } 3095 ``` 3096 3097  3098 3099 3100### putImageData 3101 3102putImageData(imageData: ImageData, dx: number | string, dy: number | string): void 3103 3104使用[ImageData](ts-components-canvas-imagedata.md)数据填充新的矩形区域。 3105 3106**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3107 3108**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3109 3110**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3111 3112 **参数：** 3113 3114| 参数名 | 类型 | 必填 | 描述 | 3115| ----------- | ---------------------------------------- | ---- | ----------------------------- | 3116| imagedata | Object | 是 | 包含像素值的ImageData对象。 | 3117| dx | number \| string<sup>10+</sup> | 是 | 填充区域在x轴方向的偏移量。<br>默认单位：vp。 | 3118| dy | number \| string<sup>10+</sup> | 是 | 填充区域在y轴方向的偏移量。<br>默认单位：vp。 | 3119 3120putImageData(imageData: ImageData, dx: number | string, dy: number | string, dirtyX: number | string, dirtyY: number | string, dirtyWidth?: number | string, dirtyHeight: number | string): void 3121 3122使用[ImageData](ts-components-canvas-imagedata.md)数据填充新的矩形区域。 3123 3124**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3125 3126**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3127 3128**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3129 3130 **参数：** 3131 3132| 参数名 | 类型 | 必填 | 描述 | 3133| ----------- | ---------------------------------------- | ---- | ----------------------------- | 3134| imagedata | Object | 是 | 包含像素值的ImageData对象。 | 3135| dx | number \| string<sup>10+</sup> | 是 | 填充区域在x轴方向的偏移量。<br>默认单位：vp。 | 3136| dy | number \| string<sup>10+</sup> | 是 | 填充区域在y轴方向的偏移量。<br>默认单位：vp。 | 3137| dirtyX | number \| string<sup>10+</sup> | 是 | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。<br>默认单位：vp。 | 3138| dirtyY | number \| string<sup>10+</sup> | 是 | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。<br>默认单位：vp。 | 3139| dirtyWidth | number \| string<sup>10+</sup> | 是 | 源图像数据矩形裁切范围的宽度。<br>默认单位：vp。 | 3140| dirtyHeight | number \| string<sup>10+</sup> | 是 | 源图像数据矩形裁切范围的高度。<br>默认单位：vp。 | 3141 3142 **示例：** 3143 3144 ```ts 3145 // xxx.ets 3146 @Entry 3147 @Component 3148 struct PutImageData { 3149 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3150 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3151 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 3152 3153 build() { 3154 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3155 Canvas(this.context) 3156 .width('100%') 3157 .height('100%') 3158 .backgroundColor('#ffff00') 3159 .onReady(() => { 3160 let offContext = this.offCanvas.getContext("2d", this.settings) 3161 let imageDataNum = offContext.createImageData(100, 100) 3162 let imageData = offContext.createImageData(imageDataNum) 3163 for (let i = 0; i < imageData.data.length; i += 4) { 3164 imageData.data[i + 0] = 255 3165 imageData.data[i + 1] = 0 3166 imageData.data[i + 2] = 255 3167 imageData.data[i + 3] = 255 3168 } 3169 offContext.putImageData(imageData, 10, 10) 3170 offContext.putImageData(imageData, 150, 10, 0, 0, 50, 50) 3171 let image = this.offCanvas.transferToImageBitmap() 3172 this.context.transferFromImageBitmap(image) 3173 }) 3174 } 3175 .width('100%') 3176 .height('100%') 3177 } 3178 } 3179 ``` 3180 3181  3182 3183### setLineDash 3184 3185setLineDash(segments: number[]): void 3186 3187设置画布的虚线样式。 3188 3189**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3190 3191**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3192 3193**参数：** 3194 3195| 参数名 | 类型 | 必填 | 说明 | 3196| -------- | -------- | -------- | ------------------- | 3197| segments | number[] | 是 | 描述线段如何交替和线段间距长度的数组。<br>默认单位：vp。 | 3198 3199**示例：** 3200 3201 ```ts 3202 @Entry 3203 @Component 3204 struct SetLineDash { 3205 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3206 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3207 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 3208 3209 build() { 3210 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3211 Canvas(this.context) 3212 .width('100%') 3213 .height('100%') 3214 .backgroundColor('#ffff00') 3215 .onReady(() =>{ 3216 let offContext = this.offCanvas.getContext("2d", this.settings) 3217 offContext.arc(100, 75, 50, 0, 6.28) 3218 offContext.setLineDash([10,20]) 3219 offContext.stroke() 3220 let image = this.offCanvas.transferToImageBitmap() 3221 this.context.transferFromImageBitmap(image) 3222 }) 3223 } 3224 .width('100%') 3225 .height('100%') 3226 } 3227 } 3228 ``` 3229  3230 3231 3232### getLineDash 3233 3234getLineDash(): number[] 3235 3236获得当前画布的虚线样式。 3237 3238**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3239 3240**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3241 3242**返回值：** 3243 3244| 类型 | 说明 | 3245| -------- | ------------------------ | 3246| number[] | 返回数组，该数组用来描述线段如何交替和间距长度。<br>默认单位：vp。 | 3247 3248**示例：** 3249 3250 ```ts 3251 // xxx.ets 3252 @Entry 3253 @Component 3254 struct OffscreenCanvasGetLineDash { 3255 @State message: string = 'Hello World' 3256 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3257 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3258 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 3259 build() { 3260 Row() { 3261 Column() { 3262 Text(this.message) 3263 .fontSize(50) 3264 .fontWeight(FontWeight.Bold) 3265 .onClick(()=>{ 3266 console.error('before getlinedash clicked') 3267 let offContext = this.offCanvas.getContext("2d", this.settings) 3268 let res = offContext.getLineDash() 3269 console.error(JSON.stringify(res)) 3270 }) 3271 Canvas(this.context) 3272 .width('100%') 3273 .height('100%') 3274 .backgroundColor('#ffff00') 3275 .onReady(() => { 3276 let offContext = this.offCanvas.getContext("2d", this.settings) 3277 offContext.arc(100, 75, 50, 0, 6.28) 3278 offContext.setLineDash([10,20]) 3279 offContext.stroke() 3280 let res = offContext.getLineDash() 3281 let image = this.offCanvas.transferToImageBitmap() 3282 this.context.transferFromImageBitmap(image) 3283 }) 3284 } 3285 .width('100%') 3286 } 3287 .height('100%') 3288 } 3289 } 3290 ``` 3291 3292 3293 3294 3295### toDataURL 3296 3297toDataURL(type?: string, quality?: any): string 3298 3299生成一个包含图片展示的URL，该接口存在内存拷贝行为，高耗时，应避免频繁使用。 3300 3301**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3302 3303**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3304 3305**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3306 3307**参数：** 3308 3309| 参数名 | 类型 | 必填 | 说明 | 3310| ------- | ------ | ---- | ---------------------------------------- | 3311| type | string | 否 | 用于指定图像格式。<br/>可选参数为："image/png", "image/jpeg", "image/webp"。。<br>默认值：image/png。 | 3312| quality | any | 否 | 在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。<br>默认值：0.92。 | 3313 3314**返回值：** 3315 3316| 类型 | 说明 | 3317| ------ | --------- | 3318| string | 图像的URL地址。 | 3319 3320**示例：** 3321 3322 ```ts 3323 // xxx.ets 3324 @Entry 3325 @Component 3326 struct ToDataURL { 3327 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3328 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3329 private offCanvas: OffscreenCanvas = new OffscreenCanvas(100, 100) 3330 @State dataURL: string = "" 3331 3332 build() { 3333 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3334 Canvas(this.context) 3335 .width(100) 3336 .height(100) 3337 .onReady(() => { 3338 let offContext = this.offCanvas.getContext("2d", this.settings) 3339 offContext.fillRect(0,0,100,100) 3340 this.dataURL = offContext.toDataURL() 3341 }) 3342 Text(this.dataURL) 3343 } 3344 .width('100%') 3345 .height('100%') 3346 .backgroundColor('#ffff00') 3347 } 3348 } 3349 ``` 3350 3351 3352 3353### transferToImageBitmap 3354 3355transferToImageBitmap(): ImageBitmap 3356 3357在离屏画布最近渲染的图像上创建一个ImageBitmap对象。 3358 3359**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3360 3361**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3362 3363**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3364 3365**返回值：** 3366 3367| 类型 | 说明 | 3368| ---------------------------------------- | --------------- | 3369| [ImageBitmap](ts-components-canvas-imagebitmap.md) | 存储离屏画布上渲染的像素数据。 | 3370 3371 3372 **示例：** 3373 3374 ```ts 3375 // xxx.ets 3376 @Entry 3377 @Component 3378 struct PutImageData { 3379 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3380 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3381 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 3382 3383 build() { 3384 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3385 Canvas(this.context) 3386 .width('100%') 3387 .height('100%') 3388 .backgroundColor('#ffff00') 3389 .onReady(() =>{ 3390 let offContext = this.offCanvas.getContext("2d", this.settings) 3391 let imageData = offContext.createImageData(100, 100) 3392 for (let i = 0; i < imageData.data.length; i += 4) { 3393 imageData.data[i + 0] = 255 3394 imageData.data[i + 1] = 0 3395 imageData.data[i + 2] = 255 3396 imageData.data[i + 3] = 255 3397 } 3398 offContext.putImageData(imageData, 10, 10) 3399 let image = this.offCanvas.transferToImageBitmap() 3400 this.context.transferFromImageBitmap(image) 3401 }) 3402 } 3403 .width('100%') 3404 .height('100%') 3405 } 3406 } 3407 ``` 3408 3409 3410### restore 3411 3412restore(): void 3413 3414对保存的绘图上下文进行恢复。 3415 3416> **说明：** 3417> 3418> 当restore()次数未超出save()次数时，从栈中弹出存储的绘制状态并恢复CanvasRenderingContext2D对象的属性、剪切路径和变换矩阵的值。</br> 3419> 当restore()次数超出save()次数时，此方法不做任何改变。</br> 3420> 当没有保存状态时，此方法不做任何改变。 3421 3422**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3423 3424**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3425 3426**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3427 3428 **示例：** 3429 3430 ```ts 3431 // xxx.ets 3432 @Entry 3433 @Component 3434 struct CanvasExample { 3435 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3436 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3437 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 3438 3439 build() { 3440 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3441 Canvas(this.context) 3442 .width('100%') 3443 .height('100%') 3444 .backgroundColor('#ffff00') 3445 .onReady(() =>{ 3446 let offContext = this.offCanvas.getContext("2d", this.settings) 3447 offContext.save() // save the default state 3448 offContext.fillStyle = "#00ff00" 3449 offContext.fillRect(20, 20, 100, 100) 3450 offContext.restore() // restore to the default state 3451 offContext.fillRect(150, 75, 100, 100) 3452 let image = this.offCanvas.transferToImageBitmap() 3453 this.context.transferFromImageBitmap(image) 3454 }) 3455 } 3456 .width('100%') 3457 .height('100%') 3458 } 3459 } 3460 ``` 3461 3462 3463 3464### save 3465 3466save(): void 3467 3468对当前的绘图上下文进行保存。 3469 3470**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3471 3472**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3473 3474**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3475 3476 **示例：** 3477 3478 ```ts 3479 // xxx.ets 3480 @Entry 3481 @Component 3482 struct CanvasExample { 3483 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3484 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3485 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 3486 3487 build() { 3488 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3489 Canvas(this.context) 3490 .width('100%') 3491 .height('100%') 3492 .backgroundColor('#ffff00') 3493 .onReady(() =>{ 3494 let offContext = this.offCanvas.getContext("2d", this.settings) 3495 offContext.save() // save the default state 3496 offContext.fillStyle = "#00ff00" 3497 offContext.fillRect(20, 20, 100, 100) 3498 offContext.restore() // restore to the default state 3499 offContext.fillRect(150, 75, 100, 100) 3500 let image = this.offCanvas.transferToImageBitmap() 3501 this.context.transferFromImageBitmap(image) 3502 }) 3503 } 3504 .width('100%') 3505 .height('100%') 3506 } 3507 } 3508 ``` 3509 3510 3511 3512### createLinearGradient 3513 3514createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient 3515 3516创建一个线性渐变色。 3517 3518**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3519 3520**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3521 3522**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3523 3524 **参数：** 3525 3526| 参数名 | 类型 | 必填 | 说明 | 3527| ---- | ------ | ---- | -------- | 3528| x0 | number | 是 | 起点的x轴坐标。<br>默认单位：vp。 | 3529| y0 | number | 是 | 起点的y轴坐标。<br>默认单位：vp。 | 3530| x1 | number | 是 | 终点的x轴坐标。<br>默认单位：vp。 | 3531| y1 | number | 是 | 终点的y轴坐标。<br>默认单位：vp。 | 3532 3533**返回值：** 3534 3535| 类型 | 说明 | 3536| ------ | --------- | 3537| [CanvasGradient](ts-components-canvas-canvasgradient.md) | 新的CanvasGradient对象，用于在offscreenCanvas上创建渐变效果。 | 3538 3539 **示例：** 3540 3541 ```ts 3542 // xxx.ets 3543 @Entry 3544 @Component 3545 struct CreateLinearGradient { 3546 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3547 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3548 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 3549 3550 build() { 3551 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3552 Canvas(this.context) 3553 .width('100%') 3554 .height('100%') 3555 .backgroundColor('#ffff00') 3556 .onReady(() =>{ 3557 let offContext = this.offCanvas.getContext("2d", this.settings) 3558 let grad = offContext.createLinearGradient(50,0, 300,100) 3559 grad.addColorStop(0.0, '#ff0000') 3560 grad.addColorStop(0.5, '#ffffff') 3561 grad.addColorStop(1.0, '#00ff00') 3562 offContext.fillStyle = grad 3563 offContext.fillRect(0, 0, 400, 400) 3564 let image = this.offCanvas.transferToImageBitmap() 3565 this.context.transferFromImageBitmap(image) 3566 }) 3567 } 3568 .width('100%') 3569 .height('100%') 3570 } 3571 } 3572 ``` 3573 3574  3575 3576 3577### createRadialGradient 3578 3579createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient 3580 3581创建一个径向渐变色。 3582 3583**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3584 3585**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3586 3587**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3588 3589 **参数：** 3590 3591| 参数名 | 类型 | 必填 | 说明 | 3592| ---- | ------ | ---- | ----------------- | 3593| x0 | number | 是 | 起始圆的x轴坐标。<br>默认单位：vp。 | 3594| y0 | number | 是 | 起始圆的y轴坐标。<br>默认单位：vp。 | 3595| r0 | number | 是 | 起始圆的半径。必须是非负且有限的。<br>默认单位：vp。 | 3596| x1 | number | 是 | 终点圆的x轴坐标。<br>默认单位：vp。 | 3597| y1 | number | 是 | 终点圆的y轴坐标。<br>默认单位：vp。 | 3598| r1 | number | 是 | 终点圆的半径。必须为非负且有限的。<br>默认单位：vp。 | 3599 3600**返回值：** 3601 3602| 类型 | 说明 | 3603| ------ | --------- | 3604| [CanvasGradient](ts-components-canvas-canvasgradient.md) | 新的CanvasGradient对象，用于在offscreenCanvas上创建渐变效果。 | 3605 3606 **示例：** 3607 3608 ```ts 3609 // xxx.ets 3610 @Entry 3611 @Component 3612 struct CreateRadialGradient { 3613 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3614 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3615 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 3616 3617 build() { 3618 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3619 Canvas(this.context) 3620 .width('100%') 3621 .height('100%') 3622 .backgroundColor('#ffff00') 3623 .onReady(() =>{ 3624 let offContext = this.offCanvas.getContext("2d", this.settings) 3625 let grad = offContext.createRadialGradient(200,200,50, 200,200,200) 3626 grad.addColorStop(0.0, '#ff0000') 3627 grad.addColorStop(0.5, '#ffffff') 3628 grad.addColorStop(1.0, '#00ff00') 3629 offContext.fillStyle = grad 3630 offContext.fillRect(0, 0, 440, 440) 3631 let image = this.offCanvas.transferToImageBitmap() 3632 this.context.transferFromImageBitmap(image) 3633 }) 3634 } 3635 .width('100%') 3636 .height('100%') 3637 } 3638 } 3639 ``` 3640 3641  3642 3643### createConicGradient<sup>10+</sup> 3644 3645createConicGradient(startAngle: number, x: number, y: number): CanvasGradient 3646 3647创建一个圆锥渐变色。 3648 3649**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3650 3651**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3652 3653**参数：** 3654 3655| 参数名 | 类型 | 必填 | 说明 | 3656| ---------- | ------ | ---- | ----------------------------------- | 3657| startAngle | number | 是 | 开始渐变的角度。角度测量从中心右侧水平开始，顺时针移动。<br>单位：弧度。 | 3658| x | number | 是 | 圆锥渐变的中心x轴坐标。<br>默认单位：vp。 | 3659| y | number | 是 | 圆锥渐变的中心y轴坐标。<br>默认单位：vp。 | 3660 3661**返回值：** 3662 3663| 类型 | 说明 | 3664| ------ | --------- | 3665| [CanvasGradient](ts-components-canvas-canvasgradient.md) | 新的CanvasGradient对象，用于在offscreenCanvas上创建渐变效果。 | 3666 3667**示例：** 3668 3669```ts 3670// xxx.ets 3671@Entry 3672@Component 3673struct OffscreenCanvasConicGradientPage { 3674 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3675 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3676 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 3677 3678 build() { 3679 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3680 Canvas(this.context) 3681 .width('100%') 3682 .height('100%') 3683 .backgroundColor('#ffffff') 3684 .onReady(() =>{ 3685 let offContext = this.offCanvas.getContext("2d", this.settings) 3686 let grad = offContext.createConicGradient(0, 50, 80) 3687 grad.addColorStop(0.0, '#ff0000') 3688 grad.addColorStop(0.5, '#ffffff') 3689 grad.addColorStop(1.0, '#00ff00') 3690 offContext.fillStyle = grad 3691 offContext.fillRect(0, 30, 100, 100) 3692 let image = this.offCanvas.transferToImageBitmap() 3693 this.context.transferFromImageBitmap(image) 3694 }) 3695 } 3696 .width('100%') 3697 .height('100%') 3698 } 3699} 3700``` 3701 3702  3703
