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