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