1# OffscreenCanvasRenderingContext2D对象 2 3使用OffscreenCanvasRenderingContext2D在Canvas上进行离屏绘制，绘制对象可以是矩形、文本、图片等。离屏绘制是指将需要绘制的内容先绘制在缓存区，然后将其转换成图片，一次性绘制到canvas上，加快了绘制速度。 4 5> **说明：** 6> 7> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10 11## 接口 12 13OffscreenCanvasRenderingContext2D(width: number, height: number, setting: RenderingContextSettings) 14 15**参数：** 16 17| 参数名 | 参数类型 | 必填 | 参数描述 | 18| ------- | ------------------------------------------------------------ | ---- | ------------------------------------ | 19| width | number | 是 | 离屏画布的宽度 | 20| height | number | 是 | 离屏画布的高度 | 21| setting | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | 是 | 见RenderingContextSettings接口描述。 | 22 23 24## 属性 25 26| 名称 | 类型 | 描述 | 27| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | 28| [fillStyle](#fillstyle) | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | 指定绘制的填充色。<br/>- 类型为string时，表示设置填充区域的颜色。<br/>- 类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 | 29| [lineWidth](#linewidth) | number | 设置绘制线条的宽度。 | 30| [strokeStyle](#strokestyle) | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | 设置描边的颜色。<br/>- 类型为string时，表示设置描边使用的颜色。<br/>- 类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 | 31| [lineCap](#linecap) | CanvasLineCap | 指定线端点的样式，可选值为：<br/>- 'butt'：线端点以方形结束。<br/>- 'round'：线端点以圆形结束。<br/>- 'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。<br/>- 默认值：'butt'。 | 32| [lineJoin](#linejoin) | CanvasLineJoin | 指定线段间相交的交点样式，可选值为：<br/>- 'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。<br/>- 'bevel'：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。<br/>- 'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。<br/>- 默认值：'miter'。 | 33| [miterLimit](#miterlimit) | number | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 <br/>- 默认值：10。 | 34| [font](#font) | string | 设置文本绘制中的字体样式。<br/>语法：ctx.font='font-size font-family'<br/>- font-size(可选)，指定字号和行高，单位只支持px。<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。<br/>- font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif', 'serif', 'monospace'。<br/>- 默认值：'normal normal 14px sans-serif'。 | 35| [textAlign](#textalign) | CanvasTextAlign | 设置文本绘制中的文本对齐方式，可选值为：<br/>- 'left'：文本左对齐。<br/>- 'right'：文本右对齐。<br/>- 'center'：文本居中对齐。<br/>- 'start'：文本对齐界线开始的地方。<br/>- 'end'：文本对齐界线结束的地方。<br/>>  **说明：**<br/>> ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。<br/>- 默认值：'left'。 | 36| [textBaseline](#textbaseline) | CanvasTextBaseline | 设置文本绘制中的水平对齐方式，可选值为：<br/>- 'alphabetic'：文本基线是标准的字母基线。<br/>- 'top'：文本基线在文本块的顶部。<br/>- 'hanging'：文本基线是悬挂基线。<br/>- 'middle'：文本基线在文本块的中间。<br/>- 'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。<br/>- 'bottom'：文本基线在文本块的底部。 与ideographic基线的区别在于ideographic基线不需要考虑下行字母。<br/>- 默认值：'alphabetic'。 | 37| [globalAlpha](#globalalpha) | number | 设置透明度，0.0为完全透明，1.0为完全不透明。 | 38| [lineDashOffset](#linedashoffset) | number | 设置画布的虚线偏移量，精度为float。 <br/>- 默认值：0.0。 | 39| [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'。 | 40| [shadowBlur](#shadowblur) | number | 设置绘制阴影时的模糊级别，值越大越模糊，精度为float。 <br/>- 默认值：0.0。 | 41| [shadowColor](#shadowcolor) | string | 设置绘制阴影时的阴影颜色。 | 42| [shadowOffsetX](#shadowoffsetx) | number | 设置绘制阴影时和原有对象的水平偏移值。 | 43| [shadowOffsetY](#shadowoffsety) | number | 设置绘制阴影时和原有对象的垂直偏移值。 | 44| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。 <br/>- 默认值：true。 | 45 46>  **说明：** 47> fillStyle、shadowColor与 strokeStyle 中string类型格式为 'rgb(255, 255, 255)'，'rgba(255, 255, 255, 1.0)'，'\#FFFFFF'。 48 49 50### fillStyle 51 52```ts 53// xxx.ets 54@Entry 55@Component 56struct FillStyleExample { 57 private settings: RenderingContextSettings = new RenderingContextSettings(true) 58 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 59 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 60 61 build() { 62 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 63 Canvas(this.context) 64 .width('100%') 65 .height('100%') 66 .backgroundColor('#ffff00') 67 .onReady(() =>{ 68 this.offContext.fillStyle = '#0000ff' 69 this.offContext.fillRect(20, 160, 150, 100) 70 var image = this.offContext.transferToImageBitmap() 71 this.context.transferFromImageBitmap(image) 72 }) 73 } 74 .width('100%') 75 .height('100%') 76 } 77} 78``` 79 80 81 82 83### lineWidth 84 85```ts 86// xxx.ets 87@Entry 88@Component 89struct LineWidthExample { 90 private settings: RenderingContextSettings = new RenderingContextSettings(true) 91 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 92 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 93 94 build() { 95 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 96 Canvas(this.context) 97 .width('100%') 98 .height('100%') 99 .backgroundColor('#ffff00') 100 .onReady(() =>{ 101 this.offContext.lineWidth = 5 102 this.offContext.strokeRect(25, 25, 85, 105) 103 var image = this.offContext.transferToImageBitmap() 104 this.context.transferFromImageBitmap(image) 105 }) 106 } 107 .width('100%') 108 .height('100%') 109 } 110} 111``` 112 113 114 115 116### strokeStyle 117 118```ts 119// xxx.ets 120@Entry 121@Component 122struct StrokeStyleExample { 123 private settings: RenderingContextSettings = new RenderingContextSettings(true) 124 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 125 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 126 127 build() { 128 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 129 Canvas(this.context) 130 .width('100%') 131 .height('100%') 132 .backgroundColor('#ffff00') 133 .onReady(() =>{ 134 this.offContext.lineWidth = 10 135 this.offContext.strokeStyle = '#0000ff' 136 this.offContext.strokeRect(25, 25, 155, 105) 137 var image = this.offContext.transferToImageBitmap() 138 this.context.transferFromImageBitmap(image) 139 }) 140 } 141 .width('100%') 142 .height('100%') 143 } 144} 145``` 146 147 148 149 150### lineCap 151 152```ts 153// xxx.ets 154@Entry 155@Component 156struct LineCapExample { 157 private settings: RenderingContextSettings = new RenderingContextSettings(true) 158 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 159 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 160 161 build() { 162 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 163 Canvas(this.context) 164 .width('100%') 165 .height('100%') 166 .backgroundColor('#ffff00') 167 .onReady(() =>{ 168 this.offContext.lineWidth = 8 169 this.offContext.beginPath() 170 this.offContext.lineCap = 'round' 171 this.offContext.moveTo(30, 50) 172 this.offContext.lineTo(220, 50) 173 this.offContext.stroke() 174 var image = this.offContext.transferToImageBitmap() 175 this.context.transferFromImageBitmap(image) 176 }) 177 } 178 .width('100%') 179 .height('100%') 180 } 181} 182``` 183 184 185 186 187### lineJoin 188 189```ts 190// xxx.ets 191@Entry 192@Component 193struct LineJoinExample { 194 private settings: RenderingContextSettings = new RenderingContextSettings(true) 195 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 196 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 197 198 build() { 199 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 200 Canvas(this.context) 201 .width('100%') 202 .height('100%') 203 .backgroundColor('#ffff00') 204 .onReady(() =>{ 205 this.offContext.beginPath() 206 this.offContext.lineWidth = 8 207 this.offContext.lineJoin = 'miter' 208 this.offContext.moveTo(30, 30) 209 this.offContext.lineTo(120, 60) 210 this.offContext.lineTo(30, 110) 211 this.offContext.stroke() 212 var image = this.offContext.transferToImageBitmap() 213 this.context.transferFromImageBitmap(image) 214 }) 215 } 216 .width('100%') 217 .height('100%') 218 } 219} 220``` 221 222 223 224 225### miterLimit 226 227```ts 228// xxx.ets 229@Entry 230@Component 231struct MiterLimit { 232 private settings: RenderingContextSettings = new RenderingContextSettings(true) 233 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 234 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 235 236 build() { 237 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 238 Canvas(this.context) 239 .width('100%') 240 .height('100%') 241 .backgroundColor('#ffff00') 242 .onReady(() =>{ 243 this.offContext.lineWidth = 8 244 this.offContext.lineJoin = 'miter' 245 this.offContext.miterLimit = 3 246 this.offContext.moveTo(30, 30) 247 this.offContext.lineTo(60, 35) 248 this.offContext.lineTo(30, 37) 249 this.offContext.stroke() 250 var image = this.offContext.transferToImageBitmap() 251 this.context.transferFromImageBitmap(image) 252 }) 253 } 254 .width('100%') 255 .height('100%') 256 } 257} 258``` 259 260 261 262 263### font 264 265```ts 266// xxx.ets 267@Entry 268@Component 269struct Fonts { 270 private settings: RenderingContextSettings = new RenderingContextSettings(true) 271 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 272 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 273 274 build() { 275 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 276 Canvas(this.context) 277 .width('100%') 278 .height('100%') 279 .backgroundColor('#ffff00') 280 .onReady(() =>{ 281 this.offContext.font = '30px sans-serif' 282 this.offContext.fillText("Hello World", 20, 60) 283 var image = this.offContext.transferToImageBitmap() 284 this.context.transferFromImageBitmap(image) 285 }) 286 } 287 .width('100%') 288 .height('100%') 289 } 290} 291``` 292 293 294 295 296### textAlign 297 298```ts 299// xxx.ets 300@Entry 301@Component 302struct CanvasExample { 303 private settings: RenderingContextSettings = new RenderingContextSettings(true) 304 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 305 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 306 307 build() { 308 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 309 Canvas(this.context) 310 .width('100%') 311 .height('100%') 312 .backgroundColor('#ffff00') 313 .onReady(() =>{ 314 this.offContext.strokeStyle = '#0000ff' 315 this.offContext.moveTo(140, 10) 316 this.offContext.lineTo(140, 160) 317 this.offContext.stroke() 318 319 this.offContext.font = '18px sans-serif' 320 321 this.offContext.textAlign = 'start' 322 this.offContext.fillText('textAlign=start', 140, 60) 323 this.offContext.textAlign = 'end' 324 this.offContext.fillText('textAlign=end', 140, 80) 325 this.offContext.textAlign = 'left' 326 this.offContext.fillText('textAlign=left', 140, 100) 327 this.offContext.textAlign = 'center' 328 this.offContext.fillText('textAlign=center',140, 120) 329 this.offContext.textAlign = 'right' 330 this.offContext.fillText('textAlign=right',140, 140) 331 var image = this.offContext.transferToImageBitmap() 332 this.context.transferFromImageBitmap(image) 333 }) 334 } 335 .width('100%') 336 .height('100%') 337 } 338} 339``` 340 341 342 343 344### textBaseline 345 346```ts 347// xxx.ets 348@Entry 349@Component 350struct TextBaseline { 351 private settings: RenderingContextSettings = new RenderingContextSettings(true) 352 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 353 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 354 355 build() { 356 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 357 Canvas(this.context) 358 .width('100%') 359 .height('100%') 360 .backgroundColor('#ffff00') 361 .onReady(() =>{ 362 this.offContext.strokeStyle = '#0000ff' 363 this.offContext.moveTo(0, 120) 364 this.offContext.lineTo(400, 120) 365 this.offContext.stroke() 366 367 this.offContext.font = '20px sans-serif' 368 369 this.offContext.textBaseline = 'top' 370 this.offContext.fillText('Top', 10, 120) 371 this.offContext.textBaseline = 'bottom' 372 this.offContext.fillText('Bottom', 55, 120) 373 this.offContext.textBaseline = 'middle' 374 this.offContext.fillText('Middle', 125, 120) 375 this.offContext.textBaseline = 'alphabetic' 376 this.offContext.fillText('Alphabetic', 195, 120) 377 this.offContext.textBaseline = 'hanging' 378 this.offContext.fillText('Hanging', 295, 120) 379 var image = this.offContext.transferToImageBitmap() 380 this.context.transferFromImageBitmap(image) 381 }) 382 } 383 .width('100%') 384 .height('100%') 385 } 386} 387``` 388 389 390 391 392### globalAlpha 393 394```ts 395// xxx.ets 396@Entry 397@Component 398struct GlobalAlpha { 399 private settings: RenderingContextSettings = new RenderingContextSettings(true) 400 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 401 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 402 403 build() { 404 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 405 Canvas(this.context) 406 .width('100%') 407 .height('100%') 408 .backgroundColor('#ffff00') 409 .onReady(() =>{ 410 this.offContext.fillStyle = 'rgb(0,0,255)' 411 this.offContext.fillRect(0, 0, 50, 50) 412 this.offContext.globalAlpha = 0.4 413 this.offContext.fillStyle = 'rgb(0,0,255)' 414 this.offContext.fillRect(50, 50, 50, 50) 415 var image = this.offContext.transferToImageBitmap() 416 this.context.transferFromImageBitmap(image) 417 }) 418 } 419 .width('100%') 420 .height('100%') 421 } 422} 423``` 424 425 426 427 428### lineDashOffset 429 430```ts 431// xxx.ets 432@Entry 433@Component 434struct LineDashOffset { 435 private settings: RenderingContextSettings = new RenderingContextSettings(true) 436 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 437 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 438 439 build() { 440 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 441 Canvas(this.context) 442 .width('100%') 443 .height('100%') 444 .backgroundColor('#ffff00') 445 .onReady(() =>{ 446 this.offContext.arc(100, 75, 50, 0, 6.28) 447 this.offContext.setLineDash([10,20]) 448 this.offContext.lineDashOffset = 10.0 449 this.offContext.stroke() 450 var image = this.offContext.transferToImageBitmap() 451 this.context.transferFromImageBitmap(image) 452 }) 453 } 454 .width('100%') 455 .height('100%') 456 } 457} 458 459``` 460 461 462 463### globalCompositeOperation 464 465| 名称 | 描述 | 466| ---------------- | ------------------------ | 467| source-over | 在现有绘制内容上显示新绘制内容，属于默认值。 | 468| source-atop | 在现有绘制内容顶部显示新绘制内容。 | 469| source-in | 在现有绘制内容中显示新绘制内容。 | 470| source-out | 在现有绘制内容之外显示新绘制内容。 | 471| destination-over | 在新绘制内容上方显示现有绘制内容。 | 472| destination-atop | 在新绘制内容顶部显示现有绘制内容。 | 473| destination-in | 在新绘制内容中显示现有绘制内容。 | 474| destination-out | 在新绘制内容外显示现有绘制内容。 | 475| lighter | 显示新绘制内容和现有绘制内容。 | 476| copy | 显示新绘制内容而忽略现有绘制内容。 | 477| xor | 使用异或操作对新绘制内容与现有绘制内容进行融合。 | 478 479```ts 480// xxx.ets 481@Entry 482@Component 483struct GlobalCompositeOperation { 484 private settings: RenderingContextSettings = new RenderingContextSettings(true) 485 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 486 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 487 488 build() { 489 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 490 Canvas(this.context) 491 .width('100%') 492 .height('100%') 493 .backgroundColor('#ffff00') 494 .onReady(() =>{ 495 this.offContext.fillStyle = 'rgb(255,0,0)' 496 this.offContext.fillRect(20, 20, 50, 50) 497 this.offContext.globalCompositeOperation = 'source-over' 498 this.offContext.fillStyle = 'rgb(0,0,255)' 499 this.offContext.fillRect(50, 50, 50, 50) 500 this.offContext.fillStyle = 'rgb(255,0,0)' 501 this.offContext.fillRect(120, 20, 50, 50) 502 this.offContext.globalCompositeOperation = 'destination-over' 503 this.offContext.fillStyle = 'rgb(0,0,255)' 504 this.offContext.fillRect(150, 50, 50, 50) 505 var image = this.offContext.transferToImageBitmap() 506 this.context.transferFromImageBitmap(image) 507 }) 508 } 509 .width('100%') 510 .height('100%') 511 } 512} 513``` 514 515 516 517 518### shadowBlur 519 520```ts 521// xxx.ets 522@Entry 523@Component 524struct ShadowBlur { 525 private settings: RenderingContextSettings = new RenderingContextSettings(true) 526 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 527 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 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 this.offContext.shadowBlur = 30 537 this.offContext.shadowColor = 'rgb(0,0,0)' 538 this.offContext.fillStyle = 'rgb(255,0,0)' 539 this.offContext.fillRect(20, 20, 100, 80) 540 var image = this.offContext.transferToImageBitmap() 541 this.context.transferFromImageBitmap(image) 542 }) 543 } 544 .width('100%') 545 .height('100%') 546 } 547} 548``` 549 550 551 552 553### shadowColor 554 555```ts 556// xxx.ets 557@Entry 558@Component 559struct ShadowColor { 560 private settings: RenderingContextSettings = new RenderingContextSettings(true) 561 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 562 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 563 564 build() { 565 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 566 Canvas(this.context) 567 .width('100%') 568 .height('100%') 569 .backgroundColor('#ffff00') 570 .onReady(() =>{ 571 this.offContext.shadowBlur = 30 572 this.offContext.shadowColor = 'rgb(0,0,255)' 573 this.offContext.fillStyle = 'rgb(255,0,0)' 574 this.offContext.fillRect(30, 30, 100, 100) 575 var image = this.offContext.transferToImageBitmap() 576 this.context.transferFromImageBitmap(image) 577 }) 578 } 579 .width('100%') 580 .height('100%') 581 } 582} 583``` 584 585 586 587 588### shadowOffsetX 589 590```ts 591// xxx.ets 592@Entry 593@Component 594struct ShadowOffsetX { 595 private settings: RenderingContextSettings = new RenderingContextSettings(true) 596 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 597 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 598 599 build() { 600 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 601 Canvas(this.context) 602 .width('100%') 603 .height('100%') 604 .backgroundColor('#ffff00') 605 .onReady(() =>{ 606 this.offContext.shadowBlur = 10 607 this.offContext.shadowOffsetX = 20 608 this.offContext.shadowColor = 'rgb(0,0,0)' 609 this.offContext.fillStyle = 'rgb(255,0,0)' 610 this.offContext.fillRect(20, 20, 100, 80) 611 var image = this.offContext.transferToImageBitmap() 612 this.context.transferFromImageBitmap(image) 613 }) 614 } 615 .width('100%') 616 .height('100%') 617 } 618} 619``` 620 621 622 623 624### shadowOffsetY 625 626```ts 627// xxx.ets 628@Entry 629@Component 630struct ShadowOffsetY { 631 private settings: RenderingContextSettings = new RenderingContextSettings(true) 632 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 633 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 634 635 build() { 636 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 637 Canvas(this.context) 638 .width('100%') 639 .height('100%') 640 .backgroundColor('#ffff00') 641 .onReady(() =>{ 642 this.offContext.shadowBlur = 10 643 this.offContext.shadowOffsetY = 20 644 this.offContext.shadowColor = 'rgb(0,0,0)' 645 this.offContext.fillStyle = 'rgb(255,0,0)' 646 this.offContext.fillRect(30, 30, 100, 100) 647 var image = this.offContext.transferToImageBitmap() 648 this.context.transferFromImageBitmap(image) 649 }) 650 } 651 .width('100%') 652 .height('100%') 653 } 654} 655``` 656 657 658 659 660### imageSmoothingEnabled 661 662```ts 663// xxx.ets 664@Entry 665@Component 666struct ImageSmoothingEnabled { 667 private settings: RenderingContextSettings = new RenderingContextSettings(true) 668 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 669 private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") 670 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 671 672 build() { 673 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 674 Canvas(this.context) 675 .width('100%') 676 .height('100%') 677 .backgroundColor('#ffff00') 678 .onReady(() =>{ 679 this.offContext.imageSmoothingEnabled = false 680 this.offContext.drawImage( this.img,0,0,400,200) 681 var image = this.offContext.transferToImageBitmap() 682 this.context.transferFromImageBitmap(image) 683 }) 684 } 685 .width('100%') 686 .height('100%') 687 } 688} 689``` 690 691 692 693 694## 方法 695 696 697### fillRect 698 699fillRect(x: number, y: number, w: number, h: number): void 700 701填充一个矩形。 702 703 **参数：** 704 705| 参数 | 类型 | 必填 | 默认值 | 说明 | 706| ------ | ------ | ---- | ---- | ------------- | 707| x | number | 是 | 0 | 指定矩形左上角点的x坐标。 | 708| y | number | 是 | 0 | 指定矩形左上角点的y坐标。 | 709| width | number | 是 | 0 | 指定矩形的宽度。 | 710| height | number | 是 | 0 | 指定矩形的高度。 | 711 712 **示例：** 713 714 ```ts 715 // xxx.ets 716 @Entry 717 @Component 718 struct FillRect { 719 private settings: RenderingContextSettings = new RenderingContextSettings(true) 720 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 721 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 722 723 build() { 724 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 725 Canvas(this.context) 726 .width('100%') 727 .height('100%') 728 .backgroundColor('#ffff00') 729 .onReady(() =>{ 730 this.offContext.fillRect(30,30,100,100) 731 var image = this.offContext.transferToImageBitmap() 732 this.context.transferFromImageBitmap(image) 733 }) 734 } 735 .width('100%') 736 .height('100%') 737 } 738 } 739 ``` 740 741  742 743 744### strokeRect 745 746strokeRect(x: number, y: number, w: number, h: number): void 747 748绘制具有边框的矩形，矩形内部不填充。 749 750 **参数：** 751 752| 参数 | 类型 | 必填 | 默认值 | 说明 | 753| ------ | ------ | ---- | ---- | ------------ | 754| x | number | 是 | 0 | 指定矩形的左上角x坐标。 | 755| y | number | 是 | 0 | 指定矩形的左上角y坐标。 | 756| width | number | 是 | 0 | 指定矩形的宽度。 | 757| height | number | 是 | 0 | 指定矩形的高度。 | 758 759 **示例：** 760 761 ```ts 762 // xxx.ets 763 @Entry 764 @Component 765 struct StrokeRect { 766 private settings: RenderingContextSettings = new RenderingContextSettings(true) 767 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 768 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 769 770 build() { 771 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 772 Canvas(this.context) 773 .width('100%') 774 .height('100%') 775 .backgroundColor('#ffff00') 776 .onReady(() =>{ 777 this.offContext.strokeRect(30, 30, 200, 150) 778 var image = this.offContext.transferToImageBitmap() 779 this.context.transferFromImageBitmap(image) 780 }) 781 } 782 .width('100%') 783 .height('100%') 784 } 785 } 786 ``` 787 788  789 790 791### clearRect 792 793clearRect(x: number, y: number, w: number, h: number): void 794 795删除指定区域内的绘制内容。 796 797 **参数：** 798 799| 参数 | 类型 | 必填 | 默认值 | 描述 | 800| ------ | ------ | ---- | ---- | ------------- | 801| x | number | 是 | 0 | 指定矩形上的左上角x坐标。 | 802| y | number | 是 | 0 | 指定矩形上的左上角y坐标。 | 803| width | number | 是 | 0 | 指定矩形的宽度。 | 804| height | number | 是 | 0 | 指定矩形的高度。 | 805 806 **示例：** 807 808 ```ts 809 // xxx.ets 810 @Entry 811 @Component 812 struct ClearRect { 813 private settings: RenderingContextSettings = new RenderingContextSettings(true) 814 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 815 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 816 817 build() { 818 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 819 Canvas(this.context) 820 .width('100%') 821 .height('100%') 822 .backgroundColor('#ffff00') 823 .onReady(() =>{ 824 this.offContext.fillStyle = 'rgb(0,0,255)' 825 this.offContext.fillRect(20,20,200,200) 826 this.offContext.clearRect(30,30,150,100) 827 var image = this.offContext.transferToImageBitmap() 828 this.context.transferFromImageBitmap(image) 829 }) 830 } 831 .width('100%') 832 .height('100%') 833 } 834 } 835 ``` 836 837  838 839 840### fillText 841 842fillText(text: string, x: number, y: number, maxWidth?: number): void 843 844绘制填充类文本。 845 846**参数：** 847 848| 参数 | 类型 | 必填 | 默认值 | 说明 | 849| -------- | ------ | ---- | ---- | --------------- | 850| text | string | 是 | "" | 需要绘制的文本内容。 | 851| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | 852| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | 853| maxWidth | number | 否 | - | 指定文本允许的最大宽度。 | 854 855 **示例：** 856 857 ```ts 858 // xxx.ets 859 @Entry 860 @Component 861 struct FillText { 862 private settings: RenderingContextSettings = new RenderingContextSettings(true) 863 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 864 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 865 866 build() { 867 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 868 Canvas(this.context) 869 .width('100%') 870 .height('100%') 871 .backgroundColor('#ffff00') 872 .onReady(() =>{ 873 this.offContext.font = '30px sans-serif' 874 this.offContext.fillText("Hello World!", 20, 100) 875 var image = this.offContext.transferToImageBitmap() 876 this.context.transferFromImageBitmap(image) 877 }) 878 } 879 .width('100%') 880 .height('100%') 881 } 882 } 883 ``` 884 885  886 887 888### strokeText 889 890strokeText(text: string, x: number, y: number): void 891 892绘制描边类文本。 893 894**参数：** 895 896| 参数 | 类型 | 必填 | 默认值 | 描述 | 897| -------- | ------ | ---- | ---- | --------------- | 898| text | string | 是 | "" | 需要绘制的文本内容。 | 899| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | 900| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | 901| maxWidth | number | 否 | - | 需要绘制的文本的最大宽度 。 | 902 903 **示例：** 904 905 ```ts 906 // xxx.ets 907 @Entry 908 @Component 909 struct StrokeText { 910 private settings: RenderingContextSettings = new RenderingContextSettings(true) 911 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 912 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 913 914 build() { 915 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 916 Canvas(this.context) 917 .width('100%') 918 .height('100%') 919 .backgroundColor('#ffff00') 920 .onReady(() =>{ 921 this.offContext.font = '55px sans-serif' 922 this.offContext.strokeText("Hello World!", 20, 60) 923 var image = this.offContext.transferToImageBitmap() 924 this.context.transferFromImageBitmap(image) 925 }) 926 } 927 .width('100%') 928 .height('100%') 929 } 930 } 931 ``` 932 933  934 935 936### measureText 937 938measureText(text: string): TextMetrics 939 940该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。 941 942 **参数：** 943 944| 参数 | 类型 | 必填 | 默认值 | 说明 | 945| ---- | ------ | ---- | ---- | ---------- | 946| text | string | 是 | "" | 需要进行测量的文本。 | 947 948 **返回值：** 949 950| 类型 | 说明 | 951| ----------- | ------- | 952| TextMetrics | 文本的尺寸信息 | 953 954**TextMetrics类型描述:** 955 956| 属性 | 类型 | 描述 | 957| ------------------------ | ------ | ---------------------------------------- | 958| width | number | 字符串的宽度。 | 959| height | number | 字符串的高度。 | 960| actualBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界顶部的距离，当前值为0。 | 961| actualBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界底部的距离，当前值为0。 | 962| actualBoundingBoxLeft | number | 平行于基线，从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界左侧的距离，当前值为0。 | 963| actualBoundingBoxRight | number | 平行于基线，从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界右侧的距离，当前值为0。 | 964| alphabeticBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 alphabetic 基线的距离，当前值为0。 | 965| emHeightAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块顶部的距离，当前值为0。 | 966| emHeightDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块底部的距离，当前值为0。 | 967| fontBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形最高边界顶部的距离，当前值为0。 | 968| fontBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形边界最底部的距离，当前值为0。 | 969| hangingBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 hanging 基线的距离，当前值为0。 | 970| ideographicBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 ideographic 基线的距离，当前值为0。 | 971 972 **示例：** 973 974 ```ts 975 // xxx.ets 976 @Entry 977 @Component 978 struct MeasureText { 979 private settings: RenderingContextSettings = new RenderingContextSettings(true) 980 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 981 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 982 983 build() { 984 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 985 Canvas(this.context) 986 .width('100%') 987 .height('100%') 988 .backgroundColor('#ffff00') 989 .onReady(() =>{ 990 this.offContext.font = '50px sans-serif' 991 this.offContext.fillText("Hello World!", 20, 100) 992 this.offContext.fillText("width:" + this.context.measureText("Hello World!").width, 20, 200) 993 var image = this.offContext.transferToImageBitmap() 994 this.context.transferFromImageBitmap(image) 995 }) 996 } 997 .width('100%') 998 .height('100%') 999 } 1000 } 1001 ``` 1002 1003  1004 1005 1006### stroke 1007 1008stroke(path?: Path2D): void 1009 1010进行边框绘制操作。 1011 1012 **参数：** 1013 1014| 参数 | 类型 | 必填 | 默认值 | 描述 | 1015| ---- | ---------------------------------------- | ---- | ---- | ------------ | 1016| path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 | 1017 1018 **示例：** 1019 1020 ```ts 1021 // xxx.ets 1022 @Entry 1023 @Component 1024 struct Stroke { 1025 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1026 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1027 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 1028 1029 build() { 1030 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1031 Canvas(this.context) 1032 .width('100%') 1033 .height('100%') 1034 .backgroundColor('#ffff00') 1035 .onReady(() =>{ 1036 this.offContext.moveTo(25, 25) 1037 this.offContext.lineTo(25, 105) 1038 this.offContext.lineTo(75, 105) 1039 this.offContext.lineTo(75, 25) 1040 this.offContext.strokeStyle = 'rgb(0,0,255)' 1041 this.offContext.stroke() 1042 var image = this.offContext.transferToImageBitmap() 1043 this.context.transferFromImageBitmap(image) 1044 }) 1045 } 1046 .width('100%') 1047 .height('100%') 1048 } 1049 } 1050 ``` 1051 1052  1053 1054 1055### beginPath 1056 1057beginPath(): void 1058 1059创建一个新的绘制路径。 1060 1061 **示例：** 1062 1063 ```ts 1064 // xxx.ets 1065 @Entry 1066 @Component 1067 struct BeginPath { 1068 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1069 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1070 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 1071 1072 build() { 1073 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1074 Canvas(this.context) 1075 .width('100%') 1076 .height('100%') 1077 .backgroundColor('#ffff00') 1078 .onReady(() =>{ 1079 this.offContext.beginPath() 1080 this.offContext.lineWidth = 6 1081 this.offContext.strokeStyle = '#0000ff' 1082 this.offContext.moveTo(15, 80) 1083 this.offContext.lineTo(280, 160) 1084 this.offContext.stroke() 1085 var image = this.offContext.transferToImageBitmap() 1086 this.context.transferFromImageBitmap(image) 1087 }) 1088 } 1089 .width('100%') 1090 .height('100%') 1091 } 1092 } 1093 ``` 1094 1095  1096 1097 1098### moveTo 1099 1100moveTo(x: number, y: number): void 1101 1102路径从当前点移动到指定点。 1103 1104 **参数：** 1105 1106| 参数 | 类型 | 必填 | 默认值 | 说明 | 1107| ---- | ------ | ---- | ---- | --------- | 1108| x | number | 是 | 0 | 指定位置的x坐标。 | 1109| y | number | 是 | 0 | 指定位置的y坐标。 | 1110 1111 **示例：** 1112 1113 ```ts 1114 // xxx.ets 1115 @Entry 1116 @Component 1117 struct MoveTo { 1118 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1119 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1120 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 1121 1122 build() { 1123 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1124 Canvas(this.context) 1125 .width('100%') 1126 .height('100%') 1127 .backgroundColor('#ffff00') 1128 .onReady(() =>{ 1129 this.offContext.beginPath() 1130 this.offContext.moveTo(10, 10) 1131 this.offContext.lineTo(280, 160) 1132 this.offContext.stroke() 1133 var image = this.offContext.transferToImageBitmap() 1134 this.context.transferFromImageBitmap(image) 1135 }) 1136 } 1137 .width('100%') 1138 .height('100%') 1139 } 1140 } 1141 ``` 1142 1143  1144 1145 1146### lineTo 1147 1148lineTo(x: number, y: number): void 1149 1150从当前点到指定点进行路径连接。 1151 1152 **参数：** 1153 1154| 参数 | 类型 | 必填 | 默认值 | 描述 | 1155| ---- | ------ | ---- | ---- | --------- | 1156| x | number | 是 | 0 | 指定位置的x坐标。 | 1157| y | number | 是 | 0 | 指定位置的y坐标。 | 1158 1159 **示例：** 1160 1161 ```ts 1162 // xxx.ets 1163 @Entry 1164 @Component 1165 struct LineTo { 1166 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1167 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1168 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 1169 1170 build() { 1171 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1172 Canvas(this.context) 1173 .width('100%') 1174 .height('100%') 1175 .backgroundColor('#ffff00') 1176 .onReady(() =>{ 1177 this.offContext.beginPath() 1178 this.offContext.moveTo(10, 10) 1179 this.offContext.lineTo(280, 160) 1180 this.offContext.stroke() 1181 var image = this.offContext.transferToImageBitmap() 1182 this.context.transferFromImageBitmap(image) 1183 }) 1184 } 1185 .width('100%') 1186 .height('100%') 1187 } 1188 } 1189 ``` 1190 1191  1192 1193 1194### closePath 1195 1196closePath(): void 1197 1198结束当前路径形成一个封闭路径。 1199 1200 **示例：** 1201 1202 ```ts 1203 // xxx.ets 1204 @Entry 1205 @Component 1206 struct ClosePath { 1207 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1208 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1209 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 1210 1211 build() { 1212 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1213 Canvas(this.context) 1214 .width('100%') 1215 .height('100%') 1216 .backgroundColor('#ffff00') 1217 .onReady(() =>{ 1218 this.offContext.beginPath() 1219 this.offContext.moveTo(30, 30) 1220 this.offContext.lineTo(110, 30) 1221 this.offContext.lineTo(70, 90) 1222 this.offContext.closePath() 1223 this.offContext.stroke() 1224 var image = this.offContext.transferToImageBitmap() 1225 this.context.transferFromImageBitmap(image) 1226 }) 1227 } 1228 .width('100%') 1229 .height('100%') 1230 } 1231 } 1232 ``` 1233 1234  1235 1236 1237### createPattern 1238 1239createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | null 1240 1241通过指定图像和重复方式创建图片填充的模板。 1242 1243**参数：** 1244 1245| 参数 | 类型 | 必填 | 默认值 | 描述 | 1246| ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | 1247| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图源对象，具体参考ImageBitmap对象。 | 1248| repetition | string | 是 | “” | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'。 | 1249 1250**返回值：** 1251 1252| 类型 | 说明 | 1253| ------------------------------- | ----------------------- | 1254| [CanvasPattern](#canvaspattern) | 通过指定图像和重复方式创建图片填充的模板对象。 | 1255 1256 **示例：** 1257 1258 ```ts 1259 // xxx.ets 1260 @Entry 1261 @Component 1262 struct CreatePattern { 1263 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1264 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1265 private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") 1266 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 1267 1268 build() { 1269 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1270 Canvas(this.context) 1271 .width('100%') 1272 .height('100%') 1273 .backgroundColor('#ffff00') 1274 .onReady(() =>{ 1275 var pattern = this.offContext.createPattern(this.img, 'repeat') 1276 this.offContext.fillStyle = pattern 1277 this.offContext.fillRect(0, 0, 200, 200) 1278 var image = this.offContext.transferToImageBitmap() 1279 this.context.transferFromImageBitmap(image) 1280 }) 1281 } 1282 .width('100%') 1283 .height('100%') 1284 } 1285 } 1286 ``` 1287 1288  1289 1290 1291### bezierCurveTo 1292 1293bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void 1294 1295创建三次贝赛尔曲线的路径。 1296 1297 **参数：** 1298 1299| 参数 | 类型 | 必填 | 默认值 | 描述 | 1300| ---- | ------ | ---- | ---- | -------------- | 1301| cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 | 1302| cp1y | number | 是 | 0 | 第一个贝塞尔参数的y坐标值。 | 1303| cp2x | number | 是 | 0 | 第二个贝塞尔参数的x坐标值。 | 1304| cp2y | number | 是 | 0 | 第二个贝塞尔参数的y坐标值。 | 1305| x | number | 是 | 0 | 路径结束时的x坐标值。 | 1306| y | number | 是 | 0 | 路径结束时的y坐标值。 | 1307 1308 **示例：** 1309 1310 ```ts 1311 // xxx.ets 1312 @Entry 1313 @Component 1314 struct BezierCurveTo { 1315 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1316 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1317 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 1318 1319 build() { 1320 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1321 Canvas(this.context) 1322 .width('100%') 1323 .height('100%') 1324 .backgroundColor('#ffff00') 1325 .onReady(() =>{ 1326 this.offContext.beginPath() 1327 this.offContext.moveTo(10, 10) 1328 this.offContext.bezierCurveTo(20, 100, 200, 100, 200, 20) 1329 this.offContext.stroke() 1330 var image = this.offContext.transferToImageBitmap() 1331 this.context.transferFromImageBitmap(image) 1332 }) 1333 } 1334 .width('100%') 1335 .height('100%') 1336 } 1337 } 1338 ``` 1339 1340  1341 1342 1343### quadraticCurveTo 1344 1345quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void 1346 1347创建二次贝赛尔曲线的路径。 1348 1349 **参数：** 1350 1351| 参数 | 类型 | 必填 | 默认值 | 描述 | 1352| ---- | ------ | ---- | ---- | ----------- | 1353| cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 | 1354| cpy | number | 是 | 0 | 贝塞尔参数的y坐标值。 | 1355| x | number | 是 | 0 | 路径结束时的x坐标值。 | 1356| y | number | 是 | 0 | 路径结束时的y坐标值。 | 1357 1358 **示例：** 1359 1360 ```ts 1361 // xxx.ets 1362 @Entry 1363 @Component 1364 struct QuadraticCurveTo { 1365 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1366 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1367 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 1368 1369 build() { 1370 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1371 Canvas(this.context) 1372 .width('100%') 1373 .height('100%') 1374 .backgroundColor('#ffff00') 1375 .onReady(() =>{ 1376 this.offContext.beginPath() 1377 this.offContext.moveTo(20, 20) 1378 this.offContext.quadraticCurveTo(100, 100, 200, 20) 1379 this.offContext.stroke() 1380 var image = this.offContext.transferToImageBitmap() 1381 this.context.transferFromImageBitmap(image) 1382 }) 1383 } 1384 .width('100%') 1385 .height('100%') 1386 } 1387 } 1388 ``` 1389 1390  1391 1392 1393### arc 1394 1395arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void 1396 1397绘制弧线路径。 1398 1399 **参数：** 1400 1401| 参数 | 类型 | 必填 | 默认值 | 描述 | 1402| ---------------- | ------- | ---- | ----- | ---------- | 1403| x | number | 是 | 0 | 弧线圆心的x坐标值。 | 1404| y | number | 是 | 0 | 弧线圆心的y坐标值。 | 1405| radius | number | 是 | 0 | 弧线的圆半径。 | 1406| startAngle | number | 是 | 0 | 弧线的起始弧度。 | 1407| endAngle | number | 是 | 0 | 弧线的终止弧度。 | 1408| counterclockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 | 1409 1410 **示例：** 1411 1412 ```ts 1413 // xxx.ets 1414 @Entry 1415 @Component 1416 struct Arc { 1417 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1418 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1419 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 1420 1421 build() { 1422 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1423 Canvas(this.context) 1424 .width('100%') 1425 .height('100%') 1426 .backgroundColor('#ffff00') 1427 .onReady(() =>{ 1428 this.offContext.beginPath() 1429 this.offContext.arc(100, 75, 50, 0, 6.28) 1430 this.offContext.stroke() 1431 var image = this.offContext.transferToImageBitmap() 1432 this.context.transferFromImageBitmap(image) 1433 }) 1434 } 1435 .width('100%') 1436 .height('100%') 1437 } 1438 } 1439 ``` 1440 1441  1442 1443 1444### arcTo 1445 1446arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void 1447 1448依据圆弧经过的点和圆弧半径创建圆弧路径。 1449 1450 **参数：** 1451 1452| 参数 | 类型 | 必填 | 默认值 | 描述 | 1453| ------ | ------ | ---- | ---- | --------------- | 1454| x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 | 1455| y1 | number | 是 | 0 | 圆弧经过的第一个点的y坐标值。 | 1456| x2 | number | 是 | 0 | 圆弧经过的第二个点的x坐标值。 | 1457| y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 | 1458| radius | number | 是 | 0 | 圆弧的圆半径值。 | 1459 1460 **示例：** 1461 1462 ```ts 1463 // xxx.ets 1464 @Entry 1465 @Component 1466 struct ArcTo { 1467 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1468 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1469 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 1470 1471 build() { 1472 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1473 Canvas(this.context) 1474 .width('100%') 1475 .height('100%') 1476 .backgroundColor('#ffff00') 1477 .onReady(() =>{ 1478 this.offContext.moveTo(100, 20) 1479 this.offContext.arcTo(150, 20, 150, 70, 50) 1480 this.offContext.stroke() 1481 var image = this.offContext.transferToImageBitmap() 1482 this.context.transferFromImageBitmap(image) 1483 }) 1484 } 1485 .width('100%') 1486 .height('100%') 1487 } 1488 } 1489 ``` 1490 1491  1492 1493 1494### ellipse 1495 1496ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void 1497 1498在规定的矩形区域绘制一个椭圆。 1499 1500 **参数：** 1501 1502| 参数 | 类型 | 必填 | 默认值 | 说明 | 1503| ---------------- | ------- | ---- | ----- | ----------------- | 1504| x | number | 是 | 0 | 椭圆圆心的x轴坐标。 | 1505| y | number | 是 | 0 | 椭圆圆心的y轴坐标。 | 1506| radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 | 1507| radiusY | number | 是 | 0 | 椭圆y轴的半径长度。 | 1508| rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 | 1509| startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 | 1510| endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 | 1511| counterclockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。<br>true:逆时针方向绘制椭圆。<br>false:顺时针方向绘制椭圆。 | 1512 1513 **示例：** 1514 1515 ```ts 1516 // xxx.ets 1517 @Entry 1518 @Component 1519 struct CanvasExample { 1520 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1521 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1522 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 1523 build() { 1524 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1525 Canvas(this.context) 1526 .width('100%') 1527 .height('100%') 1528 .backgroundColor('#ffff00') 1529 .onReady(() =>{ 1530 this.offContext.beginPath() 1531 this.offContext.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI * 2) 1532 this.offContext.stroke() 1533 var image = this.offContext.transferToImageBitmap() 1534 this.context.transferFromImageBitmap(image) 1535 }) 1536 } 1537 .width('100%') 1538 .height('100%') 1539 } 1540 } 1541 ``` 1542 1543  1544 1545 1546### rect 1547 1548rect(x: number, y: number, w: number, h: number): void 1549 1550创建矩形路径。 1551 1552 **参数：** 1553 1554| 参数 | 类型 | 必填 | 默认值 | 描述 | 1555| ---- | ------ | ---- | ---- | ------------- | 1556| x | number | 是 | 0 | 指定矩形的左上角x坐标值。 | 1557| y | number | 是 | 0 | 指定矩形的左上角y坐标值。 | 1558| w | number | 是 | 0 | 指定矩形的宽度。 | 1559| h | number | 是 | 0 | 指定矩形的高度。 | 1560 1561 **示例：** 1562 1563 ```ts 1564 // xxx.ets 1565 @Entry 1566 @Component 1567 struct CanvasExample { 1568 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1569 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1570 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 1571 1572 build() { 1573 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1574 Canvas(this.context) 1575 .width('100%') 1576 .height('100%') 1577 .backgroundColor('#ffff00') 1578 .onReady(() =>{ 1579 this.offContext.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20) 1580 this.offContext.stroke() 1581 var image = this.offContext.transferToImageBitmap() 1582 this.context.transferFromImageBitmap(image) 1583 }) 1584 } 1585 .width('100%') 1586 .height('100%') 1587 } 1588 } 1589 ``` 1590 1591  1592 1593 1594### fill 1595 1596fill(fillRule?: CanvasFillRule): void 1597 1598对封闭路径进行填充。 1599 1600**参数:** 1601 1602| 参数 | 类型 | 必填 | 默认值 | 描述 | 1603| -------- | -------------- | ---- | --------- | ---------------------------------------- | 1604| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要填充对象的规则。<br/>可选参数为："nonzero", "evenodd"。 | 1605 1606 ```ts 1607 // xxx.ets 1608 @Entry 1609 @Component 1610 struct Fill { 1611 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1612 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1613 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 1614 1615 build() { 1616 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1617 Canvas(this.context) 1618 .width('100%') 1619 .height('100%') 1620 .backgroundColor('#ffff00') 1621 .onReady(() =>{ 1622 this.offContext.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20) 1623 this.offContext.fill() 1624 var image = this.offContext.transferToImageBitmap() 1625 this.context.transferFromImageBitmap(image) 1626 }) 1627 } 1628 .width('100%') 1629 .height('100%') 1630 } 1631 } 1632 ``` 1633 1634  1635 1636 1637fill(path: Path2D, fillRule?: CanvasFillRule): void 1638 1639对封闭路径进行填充。 1640 1641**参数:** 1642 1643| 参数 | 类型 | 必填 | 默认值 | 描述 | 1644| -------- | -------------- | ---- | --------- | ---------------------------------------- | 1645| path | Path2D | 是 | | Path2D填充路径。 | 1646| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要填充对象的规则。<br/>可选参数为："nonzero", "evenodd"。 | 1647 1648 1649**示例:** 1650 1651```ts 1652// xxx.ets 1653@Entry 1654@Component 1655struct Fill { 1656 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1657 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1658 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 1659 1660 build() { 1661 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1662 Canvas(this.context) 1663 .width('100%') 1664 .height('100%') 1665 .backgroundColor('#ffff00') 1666 .onReady(() =>{ 1667 let region = new Path2D() 1668 region.moveTo(30, 90) 1669 region.lineTo(110, 20) 1670 region.lineTo(240, 130) 1671 region.lineTo(60, 130) 1672 region.lineTo(190, 20) 1673 region.lineTo(270, 90) 1674 region.closePath() 1675 // Fill path 1676 this.offContext.fillStyle = '#00ff00' 1677 this.offContext.fill(region, "evenodd") 1678 var image = this.offContext.transferToImageBitmap() 1679 this.context.transferFromImageBitmap(image) 1680 }) 1681 } 1682 .width('100%') 1683 .height('100%') 1684 } 1685} 1686``` 1687 1688  1689 1690 1691 1692### clip 1693 1694clip(fillRule?: CanvasFillRule): void 1695 1696设置当前路径为剪切路径。 1697 1698**参数:** 1699 1700| 参数 | 类型 | 必填 | 默认值 | 描述 | 1701| -------- | -------------- | ---- | --------- | ---------------------------------------- | 1702| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要剪切对象的规则。<br/>可选参数为："nonzero", "evenodd"。 | 1703 1704 **示例：** 1705 1706 ```ts 1707 // xxx.ets 1708 @Entry 1709 @Component 1710 struct Clip { 1711 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1712 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1713 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 1714 1715 build() { 1716 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1717 Canvas(this.context) 1718 .width('100%') 1719 .height('100%') 1720 .backgroundColor('#ffff00') 1721 .onReady(() =>{ 1722 this.offContext.rect(0, 0, 100, 200) 1723 this.offContext.stroke() 1724 this.offContext.clip() 1725 this.offContext.fillStyle = "rgb(255,0,0)" 1726 this.offContext.fillRect(0, 0, 200, 200) 1727 var image = this.offContext.transferToImageBitmap() 1728 this.context.transferFromImageBitmap(image) 1729 }) 1730 } 1731 .width('100%') 1732 .height('100%') 1733 } 1734 } 1735 ``` 1736 1737  1738 1739 1740clip(path:Path2D, fillRule?: CanvasFillRule): void 1741 1742设置封闭路径为剪切路径。 1743 1744**参数:** 1745 1746| 参数 | 类型 | 必填 | 默认值 | 描述 | 1747| -------- | -------------- | ---- | --------- | ---------------------------------------- | 1748| path | Path2D | 是 | | Path2D剪切路径。 | 1749| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要剪切对象的规则。<br/>可选参数为："nonzero", "evenodd"。 | 1750 1751 **示例：** 1752 1753 ```ts 1754 // xxx.ets 1755@Entry 1756@Component 1757struct Clip { 1758 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1759 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1760 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 1761 1762 build() { 1763 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1764 Canvas(this.context) 1765 .width('100%') 1766 .height('100%') 1767 .backgroundColor('#ffff00') 1768 .onReady(() =>{ 1769 let region = new Path2D() 1770 region.moveTo(30, 90) 1771 region.lineTo(110, 20) 1772 region.lineTo(240, 130) 1773 region.lineTo(60, 130) 1774 region.lineTo(190, 20) 1775 region.lineTo(270, 90) 1776 region.closePath() 1777 this.offContext.clip(region,"evenodd") 1778 this.offContext.fillStyle = "rgb(0,255,0)" 1779 this.offContext.fillRect(0, 0, 600, 600) 1780 var image = this.offContext.transferToImageBitmap() 1781 this.context.transferFromImageBitmap(image) 1782 }) 1783 } 1784 .width('100%') 1785 .height('100%') 1786 } 1787} 1788 ``` 1789 1790  1791 1792 1793 1794### filter 1795 1796filter(filter: string): void 1797 1798为Canvas图形设置各类滤镜效果。该接口为空接口。 1799 1800**参数:** 1801 1802| 参数 | 类型 | 必填 | 默认值 | 说明 | 1803| ------ | ------ | ---- | ---- | ------------ | 1804| filter | string | 是 | - | 接受各类滤镜效果的函数。 | 1805 1806 1807### getTransform 1808 1809getTransform(): Matrix2D 1810 1811获取当前被应用到上下文的转换矩阵。该接口为空接口。 1812 1813 1814### resetTransform 1815 1816resetTransform(): void 1817 1818使用单位矩阵重新设置当前变形。该接口为空接口。 1819 1820 1821### direction 1822 1823direction(direction: CanvasDirection): void 1824 1825绘制文本时，描述当前文本方向的属性。该接口为空接口。 1826 1827 1828### rotate 1829 1830rotate(angle: number): void 1831 1832针对当前坐标轴进行顺时针旋转。 1833 1834 **参数：** 1835 1836| 参数 | 类型 | 必填 | 默认值 | 描述 | 1837| ----- | ------ | ---- | ---- | ---------------------------------------- | 1838| angle | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。 | 1839 1840 **示例：** 1841 1842 ```ts 1843 // xxx.ets 1844 @Entry 1845 @Component 1846 struct Rotate { 1847 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1848 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1849 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 1850 1851 build() { 1852 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1853 Canvas(this.context) 1854 .width('100%') 1855 .height('100%') 1856 .backgroundColor('#ffff00') 1857 .onReady(() =>{ 1858 this.offContext.rotate(45 * Math.PI / 180) 1859 this.offContext.fillRect(70, 20, 50, 50) 1860 var image = this.offContext.transferToImageBitmap() 1861 this.context.transferFromImageBitmap(image) 1862 }) 1863 } 1864 .width('100%') 1865 .height('100%') 1866 } 1867 } 1868 ``` 1869 1870  1871 1872 1873### scale 1874 1875scale(x: number, y: number): void 1876 1877设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。 1878 1879 **参数：** 1880 1881| 参数 | 类型 | 必填 | 默认值 | 描述 | 1882| ---- | ------ | ---- | ---- | ----------- | 1883| x | number | 是 | 0 | 设置水平方向的缩放值。 | 1884| y | number | 是 | 0 | 设置垂直方向的缩放值。 | 1885 1886 **示例：** 1887 1888 ```ts 1889 // xxx.ets 1890 @Entry 1891 @Component 1892 struct Scale { 1893 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1894 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1895 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 1896 1897 build() { 1898 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1899 Canvas(this.context) 1900 .width('100%') 1901 .height('100%') 1902 .backgroundColor('#ffff00') 1903 .onReady(() =>{ 1904 this.offContext.lineWidth = 3 1905 this.offContext.strokeRect(30, 30, 50, 50) 1906 this.offContext.scale(2, 2) // Scale to 200% 1907 this.offContext.strokeRect(30, 30, 50, 50) 1908 var image = this.offContext.transferToImageBitmap() 1909 this.context.transferFromImageBitmap(image) 1910 }) 1911 } 1912 .width('100%') 1913 .height('100%') 1914 } 1915 } 1916 ``` 1917 1918  1919 1920 1921### transform 1922 1923transform(a: number, b: number, c: number, d: number, e: number, f: number): void 1924 1925transform方法对应一个变换矩阵，想对一个图形进行变化的时候，只要设置此变换矩阵相应的参数，对图形的各个定点的坐标分别乘以这个矩阵，就能得到新的定点的坐标。矩阵变换效果可叠加。 1926 1927>  **说明：** 1928> 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）： 1929> 1930> - x' = scaleX \* x + skewY \* y + translateX 1931> 1932> - y' = skewX \* x + scaleY \* y + translateY 1933 1934**参数：** 1935 1936| 参数 | 类型 | 必填 | 默认值 | 描述 | 1937| ---- | ------ | ---- | ---- | -------------------- | 1938| a | number | 是 | 0 | scaleX: 指定水平缩放值。 | 1939| b | number | 是 | 0 | skewX: 指定水平倾斜值。 | 1940| c | number | 是 | 0 | skewY: 指定垂直倾斜值。 | 1941| d | number | 是 | 0 | scaleY: 指定垂直缩放值。 | 1942| e | number | 是 | 0 | translateX: 指定水平移动值。 | 1943| f | number | 是 | 0 | translateY: 指定垂直移动值。 | 1944 1945 **示例：** 1946 1947 ```ts 1948 // xxx.ets 1949 @Entry 1950 @Component 1951 struct Transform { 1952 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1953 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1954 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 1955 1956 build() { 1957 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1958 Canvas(this.context) 1959 .width('100%') 1960 .height('100%') 1961 .backgroundColor('#ffff00') 1962 .onReady(() =>{ 1963 this.offContext.fillStyle = 'rgb(0,0,0)' 1964 this.offContext.fillRect(0, 0, 100, 100) 1965 this.offContext.transform(1, 0.5, -0.5, 1, 10, 10) 1966 this.offContext.fillStyle = 'rgb(255,0,0)' 1967 this.offContext.fillRect(0, 0, 100, 100) 1968 this.offContext.transform(1, 0.5, -0.5, 1, 10, 10) 1969 this.offContext.fillStyle = 'rgb(0,0,255)' 1970 this.offContext.fillRect(0, 0, 100, 100) 1971 var image = this.offContext.transferToImageBitmap() 1972 this.context.transferFromImageBitmap(image) 1973 }) 1974 } 1975 .width('100%') 1976 .height('100%') 1977 } 1978 } 1979 ``` 1980 1981  1982 1983 1984### setTransform 1985 1986setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void 1987 1988setTransform方法使用的参数和transform()方法相同，但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。 1989 1990**参数：** 1991 1992| 参数 | 类型 | 必填 | 默认值 | 描述 | 1993| ---- | ------ | ---- | ---- | -------------------- | 1994| a | number | 是 | 0 | scaleX: 指定水平缩放值。 | 1995| b | number | 是 | 0 | skewX: 指定水平倾斜值。 | 1996| c | number | 是 | 0 | skewY: 指定垂直倾斜值。 | 1997| d | number | 是 | 0 | scaleY: 指定垂直缩放值。 | 1998| e | number | 是 | 0 | translateX: 指定水平移动值。 | 1999| f | number | 是 | 0 | translateY: 指定垂直移动值。 | 2000 2001 **示例：** 2002 2003 ```ts 2004 // xxx.ets 2005 @Entry 2006 @Component 2007 struct SetTransform { 2008 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2009 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2010 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 2011 2012 build() { 2013 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2014 Canvas(this.context) 2015 .width('100%') 2016 .height('100%') 2017 .backgroundColor('#ffff00') 2018 .onReady(() =>{ 2019 this.offContext.fillStyle = 'rgb(255,0,0)' 2020 this.offContext.fillRect(0, 0, 100, 100) 2021 this.offContext.setTransform(1,0.5, -0.5, 1, 10, 10) 2022 this.offContext.fillStyle = 'rgb(0,0,255)' 2023 this.offContext.fillRect(0, 0, 100, 100) 2024 var image = this.offContext.transferToImageBitmap() 2025 this.context.transferFromImageBitmap(image) 2026 }) 2027 } 2028 .width('100%') 2029 .height('100%') 2030 } 2031 } 2032 ``` 2033 2034  2035 2036 2037### translate 2038 2039translate(x: number, y: number): void 2040 2041移动当前坐标系的原点。 2042 2043 **参数：** 2044 2045| 参数 | 类型 | 必填 | 默认值 | 描述 | 2046| ---- | ------ | ---- | ---- | -------- | 2047| x | number | 是 | 0 | 设置水平平移量。 | 2048| y | number | 是 | 0 | 设置竖直平移量。 | 2049 2050 **示例：** 2051 2052 ```ts 2053 // xxx.ets 2054 @Entry 2055 @Component 2056 struct Translate { 2057 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2058 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2059 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 2060 2061 build() { 2062 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2063 Canvas(this.context) 2064 .width('100%') 2065 .height('100%') 2066 .backgroundColor('#ffff00') 2067 .onReady(() =>{ 2068 this.offContext.fillRect(10, 10, 50, 50) 2069 this.offContext.translate(70, 70) 2070 this.offContext.fillRect(10, 10, 50, 50) 2071 var image = this.offContext.transferToImageBitmap() 2072 this.context.transferFromImageBitmap(image) 2073 }) 2074 } 2075 .width('100%') 2076 .height('100%') 2077 } 2078 } 2079 ``` 2080 2081  2082 2083 2084### drawImage 2085 2086drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number): void 2087 2088drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number, dw: number, dh: number): void 2089 2090drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number):void 2091 2092进行图像绘制。 2093 2094 **参数：** 2095 2096| 参数 | 类型 | 必填 | 默认值 | 描述 | 2097| ----- | ---------------------------------------- | ---- | ---- | ----------------------------- | 2098| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) 或[PixelMap](../apis/js-apis-image.md#pixelmap7) | 是 | null | 图片资源，请参考ImageBitmap或PixelMap。 | 2099| sx | number | 否 | 0 | 裁切源图像时距离源图像左上角的x坐标值。 | 2100| sy | number | 否 | 0 | 裁切源图像时距离源图像左上角的y坐标值。 | 2101| sw | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 | 2102| sh | number | 否 | 0 | 裁切源图像时需要裁切的高度。 | 2103| dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 | 2104| dy | number | 是 | 0 | 绘制区域左上角在y 轴的位置。 | 2105| dw | number | 否 | 0 | 绘制区域的宽度。 | 2106| dh | number | 否 | 0 | 绘制区域的高度。 | 2107 2108 2109 **示例：** 2110 2111 ```ts 2112 // xxx.ets 2113 @Entry 2114 @Component 2115 struct DrawImage { 2116 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2117 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2118 private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") 2119 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 2120 build() { 2121 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2122 Canvas(this.context) 2123 .width('100%') 2124 .height('100%') 2125 .backgroundColor('#ffff00') 2126 .onReady(() => { 2127 this.offContext.drawImage( this.img,0,0,400,200) 2128 var image = this.offContext.transferToImageBitmap() 2129 this.context.transferFromImageBitmap(image) 2130 }) 2131 } 2132 .width('100%') 2133 .height('100%') 2134 } 2135 } 2136 ``` 2137 2138  2139 2140 2141### createImageData 2142 2143createImageData(sw: number, sh: number): ImageData 2144 2145根据宽高创建ImageData对象，请参考[ImageData](ts-components-canvas-imagedata.md)。 2146 2147 **参数：** 2148 2149| 参数 | 类型 | 必填 | 默认 | 描述 | 2150| ---- | ------ | ---- | ---- | ------------- | 2151| sw | number | 是 | 0 | ImageData的宽度。 | 2152| sh | number | 是 | 0 | ImageData的高度。 | 2153 2154 2155createImageData(imageData: ImageData): ImageData 2156 2157根据已创建的ImageData对象创建新的ImageData对象，请参考[ImageData](ts-components-canvas-imagedata.md)。 2158 2159 **参数：** 2160 2161| 参数 | 类型 | 必填 | 默认 | 描述 | 2162| --------- | ---------------------------------------- | ---- | ---- | ---------------- | 2163| imagedata | [ImageData](ts-components-canvas-imagedata.md) | 是 | null | 被复制的ImageData对象。 | 2164 2165 **返回值：** 2166 2167| 类型 | 说明 | 2168| ---------------------------------------- | ------------- | 2169| [ImageData](ts-components-canvas-imagedata.md) | 新的ImageData对象 | 2170 2171### getPixelMap 2172 2173getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap 2174 2175以当前canvas指定区域内的像素创建[PixelMap](../apis/js-apis-image.md#pixelmap7)对象。 2176 2177 **参数：** 2178 2179| 参数 | 类型 | 必填 | 默认值 | 描述 | 2180| ---- | ------ | ---- | ---- | --------------- | 2181| sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 | 2182| sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 | 2183| sw | number | 是 | 0 | 需要输出的区域的宽度。 | 2184| sh | number | 是 | 0 | 需要输出的区域的高度。 | 2185 2186**返回值：** 2187 2188| 类型 | 说明 | 2189| ---------------------------------------- | ------------ | 2190| [PixelMap](../apis/js-apis-image.md#pixelmap7) | 新的PixelMap对象 | 2191 2192 2193### getImageData 2194 2195getImageData(sx: number, sy: number, sw: number, sh: number): ImageData 2196 2197以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagedata.md)对象。 2198 2199 **参数：** 2200 2201| 参数 | 类型 | 必填 | 默认值 | 描述 | 2202| ---- | ------ | ---- | ---- | --------------- | 2203| sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 | 2204| sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 | 2205| sw | number | 是 | 0 | 需要输出的区域的宽度。 | 2206| sh | number | 是 | 0 | 需要输出的区域的高度。 | 2207 2208 **返回值：** 2209 2210| 类型 | 说明 | 2211| ---------------------------------------- | ------------- | 2212| [ImageData](ts-components-canvas-imagedata.md) | 新的ImageData对象 | 2213 2214 2215**示例：** 2216 2217 ```ts 2218 // xxx.ets 2219@Entry 2220@Component 2221struct GetImageData { 2222 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2223 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2224 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 2225 private img:ImageBitmap = new ImageBitmap("/common/images/1234.png") 2226 2227 build() { 2228 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2229 Canvas(this.context) 2230 .width('100%') 2231 .height('100%') 2232 .backgroundColor('#ffff00') 2233 .onReady(() =>{ 2234 this.offContext.drawImage(this.img,0,0,130,130) 2235 var imagedata = this.offContext.getImageData(50,50,130,130) 2236 this.offContext.putImageData(imagedata,150,150) 2237 var image = this.offContext.transferToImageBitmap() 2238 this.context.transferFromImageBitmap(image) 2239 }) 2240 } 2241 .width('100%') 2242 .height('100%') 2243 } 2244} 2245 ``` 2246 2247  2248 2249 2250### putImageData 2251 2252putImageData(imageData: Object, dx: number, dy: number): void 2253 2254putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY: number, dirtyWidth?: number, dirtyHeight: number): void 2255 2256使用[ImageData](ts-components-canvas-imagedata.md)数据填充新的矩形区域。 2257 2258 **参数：** 2259 2260| 参数 | 类型 | 必填 | 默认值 | 描述 | 2261| ----------- | ------ | ---- | ------------ | ----------------------------- | 2262| imagedata | Object | 是 | null | 包含像素值的ImageData对象。 | 2263| dx | number | 是 | 0 | 填充区域在x轴方向的偏移量。 | 2264| dy | number | 是 | 0 | 填充区域在y轴方向的偏移量。 | 2265| dirtyX | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 | 2266| dirtyY | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 | 2267| dirtyWidth | number | 否 | imagedata的宽度 | 源图像数据矩形裁切范围的宽度。 | 2268| dirtyHeight | number | 否 | imagedata的高度 | 源图像数据矩形裁切范围的高度。 | 2269 2270 **示例：** 2271 2272 ```ts 2273 // xxx.ets 2274 @Entry 2275 @Component 2276 struct PutImageData { 2277 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2278 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2279 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 2280 build() { 2281 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2282 Canvas(this.context) 2283 .width('100%') 2284 .height('100%') 2285 .backgroundColor('#ffff00') 2286 .onReady(() =>{ 2287 var imageData = this.offContext.createImageData(100, 100) 2288 for (var i = 0; i < imageData.data.length; i += 4) { 2289 imageData.data[i + 0] = 255 2290 imageData.data[i + 1] = 0 2291 imageData.data[i + 2] = 255 2292 imageData.data[i + 3] = 255 2293 } 2294 this.offContext.putImageData(imageData, 10, 10) 2295 var image = this.offContext.transferToImageBitmap() 2296 this.context.transferFromImageBitmap(image) 2297 }) 2298 } 2299 .width('100%') 2300 .height('100%') 2301 } 2302 } 2303 ``` 2304 2305  2306 2307### setLineDash 2308 2309setLineDash(segments: number[]): void 2310 2311设置画布的虚线样式。 2312 2313**参数：** 2314 2315| 参数 | 类型 | 描述 | 2316| -------- | -------- | ------------------- | 2317| segments | number[] | 描述线段如何交替和线段间距长度的数组。 | 2318 2319**示例：** 2320 2321 ```ts 2322@Entry 2323@Component 2324struct SetLineDash { 2325 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2326 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2327 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 2328 2329 build() { 2330 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2331 Canvas(this.context) 2332 .width('100%') 2333 .height('100%') 2334 .backgroundColor('#ffff00') 2335 .onReady(() =>{ 2336 this.offContext.arc(100, 75, 50, 0, 6.28) 2337 this.offContext.setLineDash([10,20]) 2338 this.offContext.stroke() 2339 var image = this.offContext.transferToImageBitmap() 2340 this.context.transferFromImageBitmap(image) 2341 }) 2342 } 2343 .width('100%') 2344 .height('100%') 2345 } 2346} 2347 ``` 2348  2349 2350 2351### getLineDash 2352 2353getLineDash(): number[] 2354 2355获得当前画布的虚线样式。 2356 2357**返回值：** 2358 2359| 类型 | 说明 | 2360| -------- | ------------------------ | 2361| number[] | 返回数组，该数组用来描述线段如何交替和间距长度。 | 2362 2363**示例：** 2364 2365 ```ts 2366 // xxx.ets 2367@Entry 2368@Component 2369struct OffscreenCanvasGetLineDash { 2370 @State message: string = 'Hello World' 2371 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2372 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2373 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 2374 build() { 2375 Row() { 2376 Column() { 2377 Text(this.message) 2378 .fontSize(50) 2379 .fontWeight(FontWeight.Bold) 2380 .onClick(()=>{ 2381 console.error('before getlinedash clicked') 2382 let res = this.offContext.getLineDash() 2383 console.error(JSON.stringify(res)) 2384 }) 2385 Canvas(this.context) 2386 .width('100%') 2387 .height('100%') 2388 .backgroundColor('#ffff00') 2389 .onReady(() => { 2390 this.offContext.arc(100, 75, 50, 0, 6.28) 2391 this.offContext.setLineDash([10,20]) 2392 this.offContext.stroke() 2393 let res = this.offContext.getLineDash() 2394 var image = this.offContext.transferToImageBitmap() 2395 this.context.transferFromImageBitmap(image) 2396 }) 2397 } 2398 .width('100%') 2399 } 2400 .height('100%') 2401 } 2402} 2403 ``` 2404 2405 2406 2407 2408### toDataURL 2409 2410toDataURL(type?: string, quality?: number): string 2411 2412生成一个包含图片展示的URL。 2413 2414从API version 9开始，该接口支持在ArkTS卡片中使用。 2415 2416**参数：** 2417 2418| 参数名 | 参数类型 | 必填 | 描述 | 2419| ------- | ------ | ---- | ---------------------------------------- | 2420| type | string | 否 | 可选参数，用于指定图像格式，默认格式为image/png。 | 2421| quality | number | 否 | 在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。 | 2422 2423**返回值：** 2424 2425| 类型 | 说明 | 2426| ------ | --------- | 2427| string | 图像的URL地址。 | 2428 2429**示例：** 2430 2431 ```ts 2432// xxx.ets 2433@Entry 2434@Component 2435struct ToDataURL { 2436 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2437 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2438 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 2439 2440 build() { 2441 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2442 Canvas(this.context) 2443 .width('100%') 2444 .height('100%') 2445 .backgroundColor('#ffff00') 2446 .onReady(() =>{ 2447 var dataURL = this.offContext.toDataURL() 2448 }) 2449 } 2450 .width('100%') 2451 .height('100%') 2452 } 2453} 2454 ``` 2455 2456 2457### imageSmoothingQuality 2458 2459imageSmoothingQuality(quality: imageSmoothingQuality) 2460 2461用于设置图像平滑度。该接口为空接口。 2462 2463 **参数：** 2464 2465| 参数 | 类型 | 描述 | 2466| ------- | --------------------- | ---------------------------------------- | 2467| quality | imageSmoothingQuality | 支持如下三种类型：'low', 'medium', 'high'。 | 2468 2469 2470### transferToImageBitmap 2471 2472transferToImageBitmap(): ImageBitmap 2473 2474在离屏画布最近渲染的图像上创建一个ImageBitmap对象。 2475 2476**返回值：** 2477 2478| 类型 | 说明 | 2479| ---------------------------------------- | --------------- | 2480| [ImageBitmap](ts-components-canvas-imagebitmap.md) | 存储离屏画布上渲染的像素数据。 | 2481 2482 2483 **示例：** 2484 2485 ```ts 2486 // xxx.ets 2487 @Entry 2488 @Component 2489 struct PutImageData { 2490 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2491 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2492 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 2493 2494 build() { 2495 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2496 Canvas(this.context) 2497 .width('100%') 2498 .height('100%') 2499 .backgroundColor('#ffff00') 2500 .onReady(() =>{ 2501 var imageData = this.offContext.createImageData(100, 100) 2502 for (var i = 0; i < imageData.data.length; i += 4) { 2503 imageData.data[i + 0] = 255 2504 imageData.data[i + 1] = 0 2505 imageData.data[i + 2] = 255 2506 imageData.data[i + 3] = 255 2507 } 2508 this.offContext.putImageData(imageData, 10, 10) 2509 var image = this.offContext.transferToImageBitmap() 2510 this.context.transferFromImageBitmap(image) 2511 }) 2512 } 2513 .width('100%') 2514 .height('100%') 2515 } 2516 } 2517 ``` 2518 2519 2520### restore 2521 2522restore(): void 2523 2524对保存的绘图上下文进行恢复。 2525 2526 **示例：** 2527 2528 ```ts 2529 // xxx.ets 2530@Entry 2531@Component 2532struct CanvasExample { 2533 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2534 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2535 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 2536 2537 build() { 2538 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2539 Canvas(this.context) 2540 .width('100%') 2541 .height('100%') 2542 .backgroundColor('#ffff00') 2543 .onReady(() =>{ 2544 this.offContext.save() // save the default state 2545 this.offContext.fillStyle = "#00ff00" 2546 this.offContext.fillRect(20, 20, 100, 100) 2547 this.offContext.restore() // restore to the default state 2548 this.offContext.fillRect(150, 75, 100, 100) 2549 var image = this.offContext.transferToImageBitmap() 2550 this.context.transferFromImageBitmap(image) 2551 }) 2552 } 2553 .width('100%') 2554 .height('100%') 2555 } 2556} 2557 ``` 2558 2559 2560 2561### save 2562 2563save(): void 2564 2565对当前的绘图上下文进行保存。 2566 2567 **示例：** 2568 2569 ```ts 2570 // xxx.ets 2571@Entry 2572@Component 2573struct CanvasExample { 2574 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2575 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2576 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 2577 2578 build() { 2579 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2580 Canvas(this.context) 2581 .width('100%') 2582 .height('100%') 2583 .backgroundColor('#ffff00') 2584 .onReady(() =>{ 2585 this.offContext.save() // save the default state 2586 this.offContext.fillStyle = "#00ff00" 2587 this.offContext.fillRect(20, 20, 100, 100) 2588 this.offContext.restore() // restore to the default state 2589 this.offContext.fillRect(150, 75, 100, 100) 2590 var image = this.offContext.transferToImageBitmap() 2591 this.context.transferFromImageBitmap(image) 2592 }) 2593 } 2594 .width('100%') 2595 .height('100%') 2596 } 2597} 2598 ``` 2599 2600 2601 2602### createLinearGradient 2603 2604createLinearGradient(x0: number, y0: number, x1: number, y1: number): void 2605 2606创建一个线性渐变色。 2607 2608 **参数：** 2609 2610| 参数 | 类型 | 必填 | 默认值 | 描述 | 2611| ---- | ------ | ---- | ---- | -------- | 2612| x0 | number | 是 | 0 | 起点的x轴坐标。 | 2613| y0 | number | 是 | 0 | 起点的y轴坐标。 | 2614| x1 | number | 是 | 0 | 终点的x轴坐标。 | 2615| y1 | number | 是 | 0 | 终点的y轴坐标。 | 2616 2617 **示例：** 2618 2619 ```ts 2620 // xxx.ets 2621 @Entry 2622 @Component 2623 struct CreateLinearGradient { 2624 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2625 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2626 2627 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 2628 build() { 2629 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2630 Canvas(this.context) 2631 .width('100%') 2632 .height('100%') 2633 .backgroundColor('#ffff00') 2634 .onReady(() =>{ 2635 var grad = this.offContext.createLinearGradient(50,0, 300,100) 2636 grad.addColorStop(0.0, '#ff0000') 2637 grad.addColorStop(0.5, '#ffffff') 2638 grad.addColorStop(1.0, '#00ff00') 2639 this.offContext.fillStyle = grad 2640 this.offContext.fillRect(0, 0, 500, 500) 2641 var image = this.offContext.transferToImageBitmap() 2642 this.context.transferFromImageBitmap(image) 2643 }) 2644 } 2645 .width('100%') 2646 .height('100%') 2647 } 2648 } 2649 ``` 2650 2651  2652 2653 2654### createRadialGradient 2655 2656createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): void 2657 2658创建一个径向渐变色。 2659 2660 **参数：** 2661 2662| 参数 | 类型 | 必填 | 默认值 | 描述 | 2663| ---- | ------ | ---- | ---- | ----------------- | 2664| x0 | number | 是 | 0 | 起始圆的x轴坐标。 | 2665| y0 | number | 是 | 0 | 起始圆的y轴坐标。 | 2666| r0 | number | 是 | 0 | 起始圆的半径。必须是非负且有限的。 | 2667| x1 | number | 是 | 0 | 终点圆的x轴坐标。 | 2668| y1 | number | 是 | 0 | 终点圆的y轴坐标。 | 2669| r1 | number | 是 | 0 | 终点圆的半径。必须为非负且有限的。 | 2670 2671 **示例：** 2672 2673 ```ts 2674 // xxx.ets 2675 @Entry 2676 @Component 2677 struct CreateRadialGradient { 2678 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2679 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2680 2681 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 2682 build() { 2683 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2684 Canvas(this.context) 2685 .width('100%') 2686 .height('100%') 2687 .backgroundColor('#ffff00') 2688 .onReady(() =>{ 2689 var grad = this.offContext.createRadialGradient(200,200,50, 200,200,200) 2690 grad.addColorStop(0.0, '#ff0000') 2691 grad.addColorStop(0.5, '#ffffff') 2692 grad.addColorStop(1.0, '#00ff00') 2693 this.offContext.fillStyle = grad 2694 this.offContext.fillRect(0, 0, 500, 500) 2695 var image = this.offContext.transferToImageBitmap() 2696 this.context.transferFromImageBitmap(image) 2697 }) 2698 } 2699 .width('100%') 2700 .height('100%') 2701 } 2702 } 2703 ``` 2704 2705  2706 2707 2708## CanvasPattern 2709 2710一个Object对象, 通过[createPattern](#createpattern)方法创建。 2711
