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