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