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