1# CanvasRenderingContext2D 2 3使用RenderingContext在Canvas组件上进行绘制，绘制对象可以是矩形、文本、图片等。 4 5> **说明：** 6> 7> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10 11## 接口 12 13CanvasRenderingContext2D(settings?: RenderingContextSettings, unit?: LengthMetricsUnit) 14 15**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 16 17**原子化服务API：** 在API version 11中，该接口支持在原子化服务中使用。 18 19**系统能力：** SystemCapability.ArkUI.ArkUI.Full 20 21**参数：** 22 23| 参数名 | 类型 | 必填 | 说明 | 24| -------- | ---------------------------------------- | ---- | ---------------------------------------- | 25| settings | [RenderingContextSettings](#renderingcontextsettings) | 否 | 用来配置CanvasRenderingContext2D对象的参数，见[RenderingContextSettings](#renderingcontextsettings)。 | 26| unit<sup>12+</sup> | [LengthMetricsUnit](../js-apis-arkui-graphics.md#lengthmetricsunit12) | 否 | 用来配置CanvasRenderingContext2D对象的单位模式，配置后无法更改，见[LengthMetricsUnit](#lengthmetricsunit12)。<br>默认值：DEFAULT。 | 27 28 29### RenderingContextSettings 30 31RenderingContextSettings(antialias?: boolean) 32 33用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿。 34 35**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 36 37**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 38 39**系统能力：** SystemCapability.ArkUI.ArkUI.Full 40 41**参数：** 42 43| 参数名 | 类型 | 必填 | 说明 | 44| --------- | ------- | ---- | ----------------------------- | 45| antialias | boolean | 否 | 表明canvas是否开启抗锯齿。<br>默认值：false。 | 46 47### LengthMetricsUnit<sup>12+</sup> 48 49用来配置CanvasRenderingContext2D对象的单位模式，默认单位模式为LengthMetricsUnit.DEFAULT，对应默认单位vp，配置后无法动态更改，详细说明见[LengthMetricsUnit](../js-apis-arkui-graphics.md#lengthmetricsunit12)。 50 51**示例：** 52 53```ts 54// xxx.ets 55import { LengthMetricsUnit } from '@kit.ArkUI' 56 57@Entry 58@Component 59struct LengthMetricsUnitDemo { 60 private settings: RenderingContextSettings = new RenderingContextSettings(true); 61 private contextPX: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings, LengthMetricsUnit.PX); 62 private contextVP: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 63 64 build() { 65 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 66 Canvas(this.contextPX) 67 .width('100%') 68 .height(150) 69 .backgroundColor('#ffff00') 70 .onReady(() => { 71 this.contextPX.fillRect(10,10,100,100) 72 this.contextPX.clearRect(10,10,50,50) 73 }) 74 75 Canvas(this.contextVP) 76 .width('100%') 77 .height(150) 78 .backgroundColor('#ffff00') 79 .onReady(() => { 80 this.contextVP.fillRect(10,10,100,100) 81 this.contextVP.clearRect(10,10,50,50) 82 }) 83 } 84 .width('100%') 85 .height('100%') 86 } 87} 88``` 89 90 91 92## 属性 93 94**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 95 96**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 97 98**系统能力：** SystemCapability.ArkUI.ArkUI.Full 99 100| 名称 | 类型 | 只读 | 可选 | 说明 | 101| --------- | ------------------------------- | ------------------ | ---------------------- | ---------------------------------------- | 102| [fillStyle](#fillstyle) | string \|number<sup>10+</sup> \|[CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | 否 | 否 | 指定绘制的填充色。<br/>- 类型为string时，表示设置填充区域的颜色。<br/>默认值：'#000000'<br/>- 类型为number时，表示设置填充区域的颜色，不支持设置全透明色。<br/>默认值：0x000000<br/>- 类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 | 103| [lineWidth](#linewidth) | number | 否 | 否 | 设置绘制线条的宽度。<br/>默认值：1(px)<br/>默认单位：vp <br/> linewidth取值不支持0和负数，0和负数按异常值处理，异常值按默认值处理。 | 104| [strokeStyle](#strokestyle) | string \|number<sup>10+</sup> \|[CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | 否 | 否 | 设置线条的颜色。<br/>- 类型为string时，表示设置线条使用的颜色。<br/>默认值：'#000000'<br/>- 类型为number时，表示设置线条使用的颜色，不支持设置全透明色。<br/>默认值：0x000000<br/>- 类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 | 105| [lineCap](#linecap) | [CanvasLineCap](#canvaslinecap) | 否 | 否 | 指定线端点的样式，可选值为：<br/>- 'butt'：线端点以方形结束。<br/>- 'round'：线端点以圆形结束。<br/>- 'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。<br/>默认值：'butt'。 | 106| [lineJoin](#linejoin) | [CanvasLineJoin](#canvaslinejoin) | 否 | 否 | 指定线段间相交的交点样式，可选值为：<br/>- 'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。<br/>- 'bevel'：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。<br/>- 'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。<br/>默认值：'miter'。 | 107| [miterLimit](#miterlimit) | number | 否 | 否 | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 <br/>默认值：10px<br/>单位：px<br/>miterLimit取值不支持0和负数，0和负数按异常值处理，异常值按默认值处理。 | 108| [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'。| 109| [textAlign](#textalign) | [CanvasTextAlign](#canvastextalign) | 否 | 否 | 设置文本绘制中的文本对齐方式，可选值为：<br/>- 'left'：文本左对齐。<br/>- 'right'：文本右对齐。<br/>- 'center'：文本居中对齐。<br/>- 'start'：文本对齐界线开始的地方。<br/>- 'end'：文本对齐界线结束的地方。<br/>ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。<br/>默认值：'start'。 | 110| [textBaseline](#textbaseline) | [CanvasTextBaseline](#canvastextbaseline) | 否 | 否 | 设置文本绘制中的水平对齐方式，可选值为：<br/>- 'alphabetic'：文本基线是标准的字母基线。<br/>- 'top'：文本基线在文本块的顶部。<br/>- 'hanging'：文本基线是悬挂基线。<br/>- 'middle'：文本基线在文本块的中间。<br/>- 'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。<br/>- 'bottom'：文本基线在文本块的底部。 与ideographic基线的区别在于ideographic基线不需要考虑下行字母。<br/>默认值：'alphabetic'。 | 111| [globalAlpha](#globalalpha) | number | 否 | 否 | 设置透明度，0.0为完全透明，1.0为完全不透明。<br/>默认值：1.0。 | 112| [lineDashOffset](#linedashoffset) | number | 否 | 否 | 设置画布的虚线偏移量，精度为float。 <br/>默认值：0.0<br/>默认单位：vp。 | 113| [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'。 | 114| [shadowBlur](#shadowblur) | number | 否 | 否 | 设置绘制阴影时的模糊级别，值越大越模糊，精度为float。 <br/>默认值：0.0<br/>单位：px。<br/>shadowBlur取值不支持负数，负数按异常值处理，异常值按默认值处理。 | 115| [shadowColor](#shadowcolor) | string | 否 | 否 | 设置绘制阴影时的阴影颜色。<br/>默认值：透明黑色。 | 116| [shadowOffsetX](#shadowoffsetx) | number | 否 | 否 | 设置绘制阴影时和原有对象的水平偏移值。<br/>默认值：0.0<br/>默认单位：vp。 | 117| [shadowOffsetY](#shadowoffsety) | number | 否 | 否 | 设置绘制阴影时和原有对象的垂直偏移值。<br/>默认值：0.0<br/>默认单位：vp。 | 118| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | 否 | 否 | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。 <br/>默认值：true。 | 119| [height](#height) | number | 是 | 否 | 组件高度。 <br/>默认单位：vp。 | 120| [width](#width) | number | 是 | 否 | 组件宽度。 <br/>默认单位：vp。 | 121| [imageSmoothingQuality](#imagesmoothingquality) | [ImageSmoothingQuality](#imagesmoothingquality-1) | 否 | 否 | imageSmoothingEnabled为true时，用于设置图像平滑度。<br/>默认值："low"。 | 122| [direction](#direction) | [CanvasDirection](#canvasdirection) | 否 | 否 | 用于设置绘制文字时使用的文字方向。<br/>默认值："inherit"。 | 123| [filter](#filter) | string | 否 | 否 | 用于设置图像的滤镜，可以组合任意数量的滤镜。<br/>支持的滤镜效果如下：<br/>- 'none': 无滤镜效果<br/>- 'blur'：给图像设置高斯模糊<br/>- 'brightness'：给图片应用一种线性乘法，使其看起来更亮或更暗<br/>- 'contrast'：调整图像的对比度<br/>- 'grayscale'：将图像转换为灰度图像<br/>- 'hue-rotate'：给图像应用色相旋转<br/>- 'invert'：反转输入图像<br/>- 'opacity'：转化图像的透明程度<br/>- 'saturate'：转换图像饱和度<br/>- 'sepia'：将图像转换为深褐色<br/>默认值：'none'。 | 124| [canvas<sup>13+</sup>](#canvas13) | [FrameNode](../../apis-arkui/js-apis-arkui-frameNode.md) | 是 | 否 | 获取和CanvasRenderingContext2D关联的Canvas组件的FrameNode实例。<br/>可用于监听关联的Canvas组件的可见状态。<br/>默认值：null。 | 125 126> **说明：** 127> 128> fillStyle、shadowColor与 strokeStyle 中string类型格式为 'rgb(255, 255, 255)'，'rgba(255, 255, 255, 1.0)'，'\#FFFFFF'。 129 130 131### fillStyle 132 133```ts 134// xxx.ets 135@Entry 136@Component 137struct FillStyleExample { 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.fillStyle = '#0000ff' 149 this.context.fillRect(20, 20, 150, 100) 150 }) 151 } 152 .width('100%') 153 .height('100%') 154 } 155} 156``` 157 158 159 160 161### lineWidth 162 163```ts 164// xxx.ets 165@Entry 166@Component 167struct LineWidthExample { 168 private settings: RenderingContextSettings = new RenderingContextSettings(true) 169 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 170 171 build() { 172 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 173 Canvas(this.context) 174 .width('100%') 175 .height('100%') 176 .backgroundColor('#ffff00') 177 .onReady(() =>{ 178 this.context.lineWidth = 5 179 this.context.strokeRect(25, 25, 85, 105) 180 }) 181 } 182 .width('100%') 183 .height('100%') 184 } 185} 186``` 187 188 189 190 191### strokeStyle 192 193```ts 194// xxx.ets 195@Entry 196@Component 197struct StrokeStyleExample { 198 private settings: RenderingContextSettings = new RenderingContextSettings(true) 199 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 200 201 build() { 202 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 203 Canvas(this.context) 204 .width('100%') 205 .height('100%') 206 .backgroundColor('#ffff00') 207 .onReady(() =>{ 208 this.context.lineWidth = 10 209 this.context.strokeStyle = '#0000ff' 210 this.context.strokeRect(25, 25, 155, 105) 211 }) 212 } 213 .width('100%') 214 .height('100%') 215 } 216} 217``` 218 219 220 221 222 223### lineCap 224 225```ts 226// xxx.ets 227@Entry 228@Component 229struct LineCapExample { 230 private settings: RenderingContextSettings = new RenderingContextSettings(true) 231 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 232 233 build() { 234 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 235 Canvas(this.context) 236 .width('100%') 237 .height('100%') 238 .backgroundColor('#ffff00') 239 .onReady(() =>{ 240 this.context.lineWidth = 8 241 this.context.beginPath() 242 this.context.lineCap = 'round' 243 this.context.moveTo(30, 50) 244 this.context.lineTo(220, 50) 245 this.context.stroke() 246 }) 247 } 248 .width('100%') 249 .height('100%') 250 } 251} 252``` 253 254 255 256 257### lineJoin 258 259```ts 260// xxx.ets 261@Entry 262@Component 263struct LineJoinExample { 264 private settings: RenderingContextSettings = new RenderingContextSettings(true) 265 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 266 267 build() { 268 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 269 Canvas(this.context) 270 .width('100%') 271 .height('100%') 272 .backgroundColor('#ffff00') 273 .onReady(() =>{ 274 this.context.beginPath() 275 this.context.lineWidth = 8 276 this.context.lineJoin = 'miter' 277 this.context.moveTo(30, 30) 278 this.context.lineTo(120, 60) 279 this.context.lineTo(30, 110) 280 this.context.stroke() 281 }) 282 } 283 .width('100%') 284 .height('100%') 285 } 286} 287``` 288 289 290 291 292### miterLimit 293 294```ts 295// xxx.ets 296@Entry 297@Component 298struct MiterLimit { 299 private settings: RenderingContextSettings = new RenderingContextSettings(true) 300 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 301 302 build() { 303 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 304 Canvas(this.context) 305 .width('100%') 306 .height('100%') 307 .backgroundColor('#ffff00') 308 .onReady(() =>{ 309 this.context.lineWidth = 8 310 this.context.lineJoin = 'miter' 311 this.context.miterLimit = 3 312 this.context.moveTo(30, 30) 313 this.context.lineTo(60, 35) 314 this.context.lineTo(30, 37) 315 this.context.stroke() 316 }) 317 } 318 .width('100%') 319 .height('100%') 320 } 321} 322``` 323 324 325 326 327### font 328 329```ts 330// xxx.ets 331@Entry 332@Component 333struct Fonts { 334 private settings: RenderingContextSettings = new RenderingContextSettings(true) 335 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 336 337 build() { 338 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 339 Canvas(this.context) 340 .width('100%') 341 .height('100%') 342 .backgroundColor('#ffff00') 343 .onReady(() =>{ 344 this.context.font = '30px sans-serif' 345 this.context.fillText("Hello px", 20, 60) 346 this.context.font = '30vp sans-serif' 347 this.context.fillText("Hello vp", 20, 100) 348 }) 349 } 350 .width('100%') 351 .height('100%') 352 } 353} 354``` 355 356 357 358 359### textAlign 360 361```ts 362// xxx.ets 363@Entry 364@Component 365struct CanvasExample { 366 private settings: RenderingContextSettings = new RenderingContextSettings(true) 367 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 368 369 build() { 370 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 371 Canvas(this.context) 372 .width('100%') 373 .height('100%') 374 .backgroundColor('#ffff00') 375 .onReady(() => { 376 this.context.strokeStyle = '#0000ff' 377 this.context.moveTo(140, 10) 378 this.context.lineTo(140, 160) 379 this.context.stroke() 380 this.context.font = '18px sans-serif' 381 this.context.textAlign = 'start' 382 this.context.fillText('textAlign=start', 140, 60) 383 this.context.textAlign = 'end' 384 this.context.fillText('textAlign=end', 140, 80) 385 this.context.textAlign = 'left' 386 this.context.fillText('textAlign=left', 140, 100) 387 this.context.textAlign = 'center' 388 this.context.fillText('textAlign=center', 140, 120) 389 this.context.textAlign = 'right' 390 this.context.fillText('textAlign=right', 140, 140) 391 }) 392 } 393 .width('100%') 394 .height('100%') 395 } 396} 397``` 398 399 400 401 402### textBaseline 403 404```ts 405// xxx.ets 406@Entry 407@Component 408struct TextBaseline { 409 private settings: RenderingContextSettings = new RenderingContextSettings(true) 410 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 411 412 build() { 413 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 414 Canvas(this.context) 415 .width('100%') 416 .height('100%') 417 .backgroundColor('#ffff00') 418 .onReady(() =>{ 419 this.context.strokeStyle = '#0000ff' 420 this.context.moveTo(0, 120) 421 this.context.lineTo(400, 120) 422 this.context.stroke() 423 this.context.font = '20px sans-serif' 424 this.context.textBaseline = 'top' 425 this.context.fillText('Top', 10, 120) 426 this.context.textBaseline = 'bottom' 427 this.context.fillText('Bottom', 55, 120) 428 this.context.textBaseline = 'middle' 429 this.context.fillText('Middle', 125, 120) 430 this.context.textBaseline = 'alphabetic' 431 this.context.fillText('Alphabetic', 195, 120) 432 this.context.textBaseline = 'hanging' 433 this.context.fillText('Hanging', 295, 120) 434 }) 435 } 436 .width('100%') 437 .height('100%') 438 } 439} 440``` 441 442 443 444 445### globalAlpha 446 447```ts 448// xxx.ets 449@Entry 450@Component 451struct GlobalAlpha { 452 private settings: RenderingContextSettings = new RenderingContextSettings(true) 453 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 454 455 build() { 456 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 457 Canvas(this.context) 458 .width('100%') 459 .height('100%') 460 .backgroundColor('#ffff00') 461 .onReady(() =>{ 462 this.context.fillStyle = 'rgb(0,0,255)' 463 this.context.fillRect(0, 0, 50, 50) 464 this.context.globalAlpha = 0.4 465 this.context.fillStyle = 'rgb(0,0,255)' 466 this.context.fillRect(50, 50, 50, 50) 467 }) 468 } 469 .width('100%') 470 .height('100%') 471 } 472} 473``` 474 475 476 477 478### lineDashOffset 479 480```ts 481// xxx.ets 482@Entry 483@Component 484struct LineDashOffset { 485 private settings: RenderingContextSettings = new RenderingContextSettings(true) 486 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 487 488 build() { 489 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 490 Canvas(this.context) 491 .width('100%') 492 .height('100%') 493 .backgroundColor('#ffff00') 494 .onReady(() =>{ 495 this.context.arc(100, 75, 50, 0, 6.28) 496 this.context.setLineDash([10,20]) 497 this.context.lineDashOffset = 10.0 498 this.context.stroke() 499 }) 500 } 501 .width('100%') 502 .height('100%') 503 } 504} 505``` 506 507 508 509 510### globalCompositeOperation 511 512| 名称 | 描述 | 513| ---------------- | ------------------------ | 514| source-over | 在现有绘制内容上显示新绘制内容，属于默认值。 | 515| source-atop | 在现有绘制内容顶部显示新绘制内容。 | 516| source-in | 在现有绘制内容中显示新绘制内容。 | 517| source-out | 在现有绘制内容之外显示新绘制内容。 | 518| destination-over | 在新绘制内容上方显示现有绘制内容。 | 519| destination-atop | 在新绘制内容顶部显示现有绘制内容。 | 520| destination-in | 在新绘制内容中显示现有绘制内容。 | 521| destination-out | 在新绘制内容外显示现有绘制内容。 | 522| lighter | 显示新绘制内容和现有绘制内容。 | 523| copy | 显示新绘制内容而忽略现有绘制内容。 | 524| xor | 使用异或操作对新绘制内容与现有绘制内容进行融合。 | 525 526```ts 527// xxx.ets 528@Entry 529@Component 530struct GlobalCompositeOperation { 531 private settings: RenderingContextSettings = new RenderingContextSettings(true) 532 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 533 534 build() { 535 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 536 Canvas(this.context) 537 .width('100%') 538 .height('100%') 539 .backgroundColor('#ffff00') 540 .onReady(() =>{ 541 this.context.fillStyle = 'rgb(255,0,0)' 542 this.context.fillRect(20, 20, 50, 50) 543 this.context.globalCompositeOperation = 'source-over' 544 this.context.fillStyle = 'rgb(0,0,255)' 545 this.context.fillRect(50, 50, 50, 50) 546 this.context.fillStyle = 'rgb(255,0,0)' 547 this.context.fillRect(120, 20, 50, 50) 548 this.context.globalCompositeOperation = 'destination-over' 549 this.context.fillStyle = 'rgb(0,0,255)' 550 this.context.fillRect(150, 50, 50, 50) 551 }) 552 } 553 .width('100%') 554 .height('100%') 555 } 556} 557``` 558 559 560 561 562### shadowBlur 563 564```ts 565// xxx.ets 566@Entry 567@Component 568struct ShadowBlur { 569 private settings: RenderingContextSettings = new RenderingContextSettings(true) 570 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 571 572 build() { 573 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 574 Canvas(this.context) 575 .width('100%') 576 .height('100%') 577 .backgroundColor('#ffff00') 578 .onReady(() =>{ 579 this.context.shadowBlur = 30 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### shadowColor 595 596```ts 597// xxx.ets 598@Entry 599@Component 600struct ShadowColor { 601 private settings: RenderingContextSettings = new RenderingContextSettings(true) 602 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 603 604 build() { 605 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 606 Canvas(this.context) 607 .width('100%') 608 .height('100%') 609 .backgroundColor('#ffff00') 610 .onReady(() =>{ 611 this.context.shadowBlur = 30 612 this.context.shadowColor = 'rgb(0,0,255)' 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### shadowOffsetX 627 628```ts 629// xxx.ets 630@Entry 631@Component 632struct ShadowOffsetX { 633 private settings: RenderingContextSettings = new RenderingContextSettings(true) 634 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 635 636 build() { 637 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 638 Canvas(this.context) 639 .width('100%') 640 .height('100%') 641 .backgroundColor('#ffff00') 642 .onReady(() =>{ 643 this.context.shadowBlur = 10 644 this.context.shadowOffsetX = 20 645 this.context.shadowColor = 'rgb(0,0,0)' 646 this.context.fillStyle = 'rgb(255,0,0)' 647 this.context.fillRect(20, 20, 100, 80) 648 }) 649 } 650 .width('100%') 651 .height('100%') 652 } 653} 654``` 655 656 657 658 659### shadowOffsetY 660 661```ts 662// xxx.ets 663@Entry 664@Component 665struct ShadowOffsetY { 666 private settings: RenderingContextSettings = new RenderingContextSettings(true) 667 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 668 build() { 669 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 670 Canvas(this.context) 671 .width('100%') 672 .height('100%') 673 .backgroundColor('#ffff00') 674 .onReady(() =>{ 675 this.context.shadowBlur = 10 676 this.context.shadowOffsetY = 20 677 this.context.shadowColor = 'rgb(0,0,0)' 678 this.context.fillStyle = 'rgb(255,0,0)' 679 this.context.fillRect(30, 30, 100, 100) 680 }) 681 } 682 .width('100%') 683 .height('100%') 684 } 685} 686``` 687 688 689 690 691### imageSmoothingEnabled 692 693```ts 694// xxx.ets 695@Entry 696@Component 697struct ImageSmoothingEnabled { 698 private settings: RenderingContextSettings = new RenderingContextSettings(true) 699 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 700 private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") 701 702 build() { 703 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 704 Canvas(this.context) 705 .width('100%') 706 .height('100%') 707 .backgroundColor('#ffff00') 708 .onReady(() =>{ 709 this.context.imageSmoothingEnabled = false 710 this.context.drawImage( this.img,0,0,400,200) 711 }) 712 } 713 .width('100%') 714 .height('100%') 715 } 716} 717``` 718 719 720 721 722### height 723 724```ts 725// xxx.ets 726@Entry 727@Component 728struct HeightExample { 729 private settings: RenderingContextSettings = new RenderingContextSettings(true) 730 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 731 732 build() { 733 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 734 Canvas(this.context) 735 .width(300) 736 .height(300) 737 .backgroundColor('#ffff00') 738 .onReady(() => { 739 let h = this.context.height 740 this.context.fillRect(0, 0, 300, h/2) 741 }) 742 } 743 .width('100%') 744 .height('100%') 745 } 746} 747``` 748 749 750 751 752### width 753 754```ts 755// xxx.ets 756@Entry 757@Component 758struct WidthExample { 759 private settings: RenderingContextSettings = new RenderingContextSettings(true) 760 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 761 762 build() { 763 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 764 Canvas(this.context) 765 .width(300) 766 .height(300) 767 .backgroundColor('#ffff00') 768 .onReady(() => { 769 let w = this.context.width 770 this.context.fillRect(0, 0, w/2, 300) 771 }) 772 } 773 .width('100%') 774 .height('100%') 775 } 776} 777``` 778 779 780 781 782### canvas<sup>13+</sup> 783 784```ts 785import { FrameNode } from '@kit.ArkUI' 786// xxx.ets 787@Entry 788@Component 789struct CanvasExample { 790 private settings: RenderingContextSettings = new RenderingContextSettings(true) 791 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 792 private text: string = '' 793 794 build() { 795 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 796 Canvas(this.context) 797 .width('100%') 798 .height('100%') 799 .backgroundColor('#ffff00') 800 .onReady(() => { 801 let node: FrameNode = this.context.canvas 802 node?.commonEvent.setOnVisibleAreaApproximateChange( 803 { ratios: [0, 1], expectedUpdateInterval: 10}, 804 (isVisible: boolean, currentRatio: number) => { 805 if (!isVisible && currentRatio <= 0.0) { 806 this.text = 'Canvas is completely invisible.' 807 } 808 if (isVisible && currentRatio >= 1.0) { 809 this.text = 'Canvas is fully visible.' 810 } 811 this.context.reset() 812 this.context.font = '30vp sans-serif' 813 this.context.fillText(this.text, 50, 50) 814 } 815 ) 816 }) 817 } 818 .width('100%') 819 .height('100%') 820 } 821} 822``` 823 824 825 826 827### imageSmoothingQuality 828 829```ts 830 // xxx.ets 831 @Entry 832 @Component 833 struct ImageSmoothingQualityDemo { 834 private settings: RenderingContextSettings = new RenderingContextSettings(true); 835 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 836 private img:ImageBitmap = new ImageBitmap("common/images/example.jpg"); 837 838 build() { 839 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 840 Canvas(this.context) 841 .width('100%') 842 .height('100%') 843 .backgroundColor('#ffff00') 844 .onReady(() =>{ 845 let ctx = this.context 846 ctx.imageSmoothingEnabled = true 847 ctx.imageSmoothingQuality = 'high' 848 ctx.drawImage(this.img, 0, 0, 400, 200) 849 }) 850 } 851 .width('100%') 852 .height('100%') 853 } 854 } 855``` 856 857 858 859 860### direction 861 862```ts 863 // xxx.ets 864 @Entry 865 @Component 866 struct DirectionDemo { 867 private settings: RenderingContextSettings = new RenderingContextSettings(true); 868 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 869 870 build() { 871 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 872 Canvas(this.context) 873 .width('100%') 874 .height('100%') 875 .backgroundColor('#ffff00') 876 .onReady(() =>{ 877 let ctx = this.context 878 ctx.font = '48px serif'; 879 ctx.textAlign = 'start' 880 ctx.fillText("Hi ltr!", 200, 50); 881 882 ctx.direction = "rtl"; 883 ctx.fillText("Hi rtl!", 200, 100); 884 }) 885 } 886 .width('100%') 887 .height('100%') 888 } 889 } 890``` 891 892 893 894 895### filter 896 897```ts 898 // xxx.ets 899 @Entry 900 @Component 901 struct FilterDemo { 902 private settings: RenderingContextSettings = new RenderingContextSettings(true); 903 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 904 private img:ImageBitmap = new ImageBitmap("common/images/example.jpg"); 905 906 build() { 907 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 908 Canvas(this.context) 909 .width('100%') 910 .height('100%') 911 .backgroundColor('#ffff00') 912 .onReady(() =>{ 913 let ctx = this.context 914 let img = this.img 915 916 ctx.drawImage(img, 0, 0, 100, 100); 917 918 ctx.filter = 'grayscale(50%)'; 919 ctx.drawImage(img, 100, 0, 100, 100); 920 921 ctx.filter = 'sepia(60%)'; 922 ctx.drawImage(img, 200, 0, 100, 100); 923 924 ctx.filter = 'saturate(30%)'; 925 ctx.drawImage(img, 0, 100, 100, 100); 926 927 ctx.filter = 'hue-rotate(90deg)'; 928 ctx.drawImage(img, 100, 100, 100, 100); 929 930 ctx.filter = 'invert(100%)'; 931 ctx.drawImage(img, 200, 100, 100, 100); 932 933 ctx.filter = 'opacity(25%)'; 934 ctx.drawImage(img, 0, 200, 100, 100); 935 936 ctx.filter = 'brightness(0.4)'; 937 ctx.drawImage(img, 100, 200, 100, 100); 938 939 ctx.filter = 'contrast(200%)'; 940 ctx.drawImage(img, 200, 200, 100, 100); 941 942 ctx.filter = 'blur(5px)'; 943 ctx.drawImage(img, 0, 300, 100, 100); 944 945 let result = ctx.toDataURL() 946 console.info(result) 947 }) 948 } 949 .width('100%') 950 .height('100%') 951 } 952 } 953``` 954 955 956 957## 方法 958 959以下方法在隐藏页面中调用会产生缓存，应避免在隐藏页面中频繁刷新Canvas。 960 961### fillRect 962 963fillRect(x: number, y: number, w: number, h: number): void 964 965填充一个矩形。 966 967**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 968 969**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 970 971**系统能力：** SystemCapability.ArkUI.ArkUI.Full 972 973**参数：** 974 975| 参数名 | 类型 | 必填 | 说明 | 976| ------ | ------ | ---- | ------------- | 977| x | number | 是 | 指定矩形左上角点的x坐标。<br>默认单位：vp。 | 978| y | number | 是 | 指定矩形左上角点的y坐标。<br>默认单位：vp。 | 979| w | number | 是 | 指定矩形的宽度。<br>默认单位：vp。 | 980| h | number | 是 | 指定矩形的高度。<br>默认单位：vp。 | 981 982**示例：** 983 984 ```ts 985 // xxx.ets 986 @Entry 987 @Component 988 struct FillRect { 989 private settings: RenderingContextSettings = new RenderingContextSettings(true) 990 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 991 992 build() { 993 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 994 Canvas(this.context) 995 .width('100%') 996 .height('100%') 997 .backgroundColor('#ffff00') 998 .onReady(() =>{ 999 this.context.fillRect(30,30,100,100) 1000 }) 1001 } 1002 .width('100%') 1003 .height('100%') 1004 } 1005 } 1006 ``` 1007 1008  1009 1010 1011### strokeRect 1012 1013strokeRect(x: number, y: number, w: number, h: number): void 1014 1015绘制具有边框的矩形，矩形内部不填充。 1016 1017**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1018 1019**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1020 1021**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1022 1023**参数：** 1024 1025| 参数名 | 类型 | 必填 | 说明 | 1026| ---- | ------ | ---- | ------------ | 1027| x | number | 是 | 指定矩形的左上角x坐标。<br>默认单位：vp。 | 1028| y | number | 是 | 指定矩形的左上角y坐标。<br>默认单位：vp。 | 1029| w | number | 是 | 指定矩形的宽度。<br>默认单位：vp。| 1030| h | number | 是 | 指定矩形的高度。<br>默认单位：vp。| 1031 1032**示例：** 1033 1034 ```ts 1035 // xxx.ets 1036 @Entry 1037 @Component 1038 struct StrokeRect { 1039 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1040 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1041 1042 build() { 1043 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1044 Canvas(this.context) 1045 .width('100%') 1046 .height('100%') 1047 .backgroundColor('#ffff00') 1048 .onReady(() =>{ 1049 this.context.strokeRect(30, 30, 200, 150) 1050 }) 1051 } 1052 .width('100%') 1053 .height('100%') 1054 } 1055 } 1056 ``` 1057 1058  1059 1060 1061### clearRect 1062 1063clearRect(x: number, y: number, w: number, h: number): void 1064 1065删除指定区域内的绘制内容。 1066 1067**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1068 1069**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1070 1071**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1072 1073**参数：** 1074 1075| 参数名 | 类型 | 必填 | 说明 | 1076| ---- | ------ | ---- | ------------- | 1077| x | number | 是 | 指定矩形上的左上角x坐标。<br>默认单位：vp。 | 1078| y | number | 是 | 指定矩形上的左上角y坐标。<br>默认单位：vp。 | 1079| w | number | 是 | 指定矩形的宽度。<br>默认单位：vp。 | 1080| h | number | 是 | 指定矩形的高度。<br>默认单位：vp。 | 1081 1082**示例：** 1083 1084 ```ts 1085 // xxx.ets 1086 @Entry 1087 @Component 1088 struct ClearRect { 1089 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1090 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1091 1092 build() { 1093 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1094 Canvas(this.context) 1095 .width('100%') 1096 .height('100%') 1097 .backgroundColor('#ffff00') 1098 .onReady(() =>{ 1099 this.context.fillStyle = 'rgb(0,0,255)' 1100 this.context.fillRect(20,20,200,200) 1101 this.context.clearRect(30,30,150,100) 1102 }) 1103 } 1104 .width('100%') 1105 .height('100%') 1106 } 1107 } 1108 ``` 1109 1110  1111 1112 1113### fillText 1114 1115fillText(text: string, x: number, y: number, maxWidth?: number): void 1116 1117绘制填充类文本。 1118 1119**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1120 1121**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1122 1123**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1124 1125**参数：** 1126 1127| 参数名 | 类型 | 必填 | 说明 | 1128| -------- | ------ | ---- | --------------- | 1129| text | string | 是 | 需要绘制的文本内容。 | 1130| x | number | 是 | 需要绘制的文本的左下角x坐标。<br>默认单位：vp。 | 1131| y | number | 是 | 需要绘制的文本的左下角y坐标。<br>默认单位：vp。 | 1132| maxWidth | number | 否 | 指定文本允许的最大宽度。<br>默认单位：vp。<br>默认值：不限制宽度。 | 1133 1134**示例：** 1135 1136 ```ts 1137 // xxx.ets 1138 @Entry 1139 @Component 1140 struct FillText { 1141 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1142 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1143 1144 build() { 1145 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1146 Canvas(this.context) 1147 .width('100%') 1148 .height('100%') 1149 .backgroundColor('#ffff00') 1150 .onReady(() =>{ 1151 this.context.font = '30px sans-serif' 1152 this.context.fillText("Hello World!", 20, 100) 1153 }) 1154 } 1155 .width('100%') 1156 .height('100%') 1157 } 1158 } 1159 ``` 1160 1161  1162 1163 1164### strokeText 1165 1166strokeText(text: string, x: number, y: number, maxWidth?: number): void 1167 1168绘制描边类文本。 1169 1170**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1171 1172**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1173 1174**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1175 1176**参数：** 1177 1178| 参数名 | 类型 | 必填 | 说明 | 1179| -------- | ------ | ---- | --------------- | 1180| text | string | 是 | 需要绘制的文本内容。 | 1181| x | number | 是 | 需要绘制的文本的左下角x坐标。<br>默认单位：vp。 | 1182| y | number | 是 | 需要绘制的文本的左下角y坐标。<br>默认单位：vp。 | 1183| maxWidth | number | 否 | 需要绘制的文本的最大宽度。<br>默认单位：vp。<br>默认值：不限制宽度。 | 1184 1185**示例：** 1186 1187 ```ts 1188 // xxx.ets 1189 @Entry 1190 @Component 1191 struct StrokeText { 1192 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1193 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1194 1195 build() { 1196 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1197 Canvas(this.context) 1198 .width('100%') 1199 .height('100%') 1200 .backgroundColor('#ffff00') 1201 .onReady(() =>{ 1202 this.context.font = '55px sans-serif' 1203 this.context.strokeText("Hello World!", 20, 60) 1204 }) 1205 } 1206 .width('100%') 1207 .height('100%') 1208 } 1209 } 1210 ``` 1211 1212  1213 1214 1215### measureText 1216 1217measureText(text: string): TextMetrics 1218 1219该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。不同设备上获取的宽度值可能不同。 1220 1221**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1222 1223**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1224 1225**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1226 1227**参数：** 1228 1229| 参数名 | 类型 | 必填 | 说明 | 1230| ---- | ------ | ---- |---------- | 1231| text | string | 是 | 需要进行测量的文本。 | 1232 1233**返回值：** 1234 1235| 类型 | 说明 | 1236| ----------- | ---------------------------------------- | 1237| [TextMetrics](#textmetrics) | 文本的尺寸信息。 | 1238 1239**示例：** 1240 1241 ```ts 1242 // xxx.ets 1243 @Entry 1244 @Component 1245 struct MeasureText { 1246 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1247 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1248 1249 build() { 1250 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1251 Canvas(this.context) 1252 .width('100%') 1253 .height('100%') 1254 .backgroundColor('#ffff00') 1255 .onReady(() =>{ 1256 this.context.font = '50px sans-serif' 1257 this.context.fillText("Hello World!", 20, 100) 1258 this.context.fillText("width:" + this.context.measureText("Hello World!").width, 20, 200) 1259 }) 1260 } 1261 .width('100%') 1262 .height('100%') 1263 } 1264 } 1265 ``` 1266 1267  1268 1269 1270### stroke 1271 1272stroke(): void 1273 1274根据当前的路径，进行边框绘制操作。 1275 1276**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1277 1278**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1279 1280**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1281 1282 **示例：** 1283 1284 ```ts 1285 // xxx.ets 1286 @Entry 1287 @Component 1288 struct Stroke { 1289 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1290 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1291 1292 build() { 1293 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1294 Canvas(this.context) 1295 .width('100%') 1296 .height('100%') 1297 .backgroundColor('#ffff00') 1298 .onReady(() => { 1299 this.context.moveTo(125, 25) 1300 this.context.lineTo(125, 105) 1301 this.context.lineTo(175, 105) 1302 this.context.lineTo(175, 25) 1303 this.context.strokeStyle = 'rgb(255,0,0)' 1304 this.context.stroke() 1305 }) 1306 } 1307 .width('100%') 1308 .height('100%') 1309 } 1310 } 1311 ``` 1312 1313  1314 1315### stroke 1316 1317stroke(path: Path2D): void 1318 1319根据指定的路径，进行边框绘制操作。 1320 1321**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1322 1323**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1324 1325**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1326 1327**参数：** 1328 1329| 参数名 | 类型 | 必填 | 说明 | 1330| ---- | ---------------------------------------- | ---- | ------------ | 1331| path | [Path2D](ts-components-canvas-path2d.md) | 是 | 需要绘制的Path2D。 | 1332 1333 **示例：** 1334 1335 ```ts 1336 // xxx.ets 1337 @Entry 1338 @Component 1339 struct Stroke { 1340 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1341 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1342 private path2Da: Path2D = new Path2D() 1343 1344 build() { 1345 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1346 Canvas(this.context) 1347 .width('100%') 1348 .height('100%') 1349 .backgroundColor('#ffff00') 1350 .onReady(() => { 1351 this.path2Da.moveTo(25, 25) 1352 this.path2Da.lineTo(25, 105) 1353 this.path2Da.lineTo(75, 105) 1354 this.path2Da.lineTo(75, 25) 1355 this.context.strokeStyle = 'rgb(0,0,255)' 1356 this.context.stroke(this.path2Da) 1357 }) 1358 } 1359 .width('100%') 1360 .height('100%') 1361 } 1362 } 1363 ``` 1364 1365  1366 1367### beginPath 1368 1369beginPath(): void 1370 1371创建一个新的绘制路径。 1372 1373**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1374 1375**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1376 1377**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1378 1379**示例：** 1380 1381 ```ts 1382 // xxx.ets 1383 @Entry 1384 @Component 1385 struct BeginPath { 1386 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1387 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1388 1389 build() { 1390 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1391 Canvas(this.context) 1392 .width('100%') 1393 .height('100%') 1394 .backgroundColor('#ffff00') 1395 .onReady(() =>{ 1396 this.context.beginPath() 1397 this.context.lineWidth = 6 1398 this.context.strokeStyle = '#0000ff' 1399 this.context.moveTo(15, 80) 1400 this.context.lineTo(280, 160) 1401 this.context.stroke() 1402 }) 1403 } 1404 .width('100%') 1405 .height('100%') 1406 } 1407 } 1408 ``` 1409 1410  1411 1412 1413### moveTo 1414 1415moveTo(x: number, y: number): void 1416 1417路径从当前点移动到指定点。 1418 1419**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1420 1421**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1422 1423**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1424 1425**参数：** 1426 1427| 参数名 | 类型 | 必填 | 说明 | 1428| ---- | ------ | ---- | --------- | 1429| x | number | 是 | 指定位置的x坐标。<br>默认单位：vp。 | 1430| y | number | 是 | 指定位置的y坐标。<br>默认单位：vp。 | 1431 1432**示例：** 1433 1434 ```ts 1435 // xxx.ets 1436 @Entry 1437 @Component 1438 struct MoveTo { 1439 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1440 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1441 1442 build() { 1443 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1444 Canvas(this.context) 1445 .width('100%') 1446 .height('100%') 1447 .backgroundColor('#ffff00') 1448 .onReady(() =>{ 1449 this.context.beginPath() 1450 this.context.moveTo(10, 10) 1451 this.context.lineTo(280, 160) 1452 this.context.stroke() 1453 }) 1454 } 1455 .width('100%') 1456 .height('100%') 1457 } 1458 } 1459 ``` 1460 1461  1462 1463 1464### lineTo 1465 1466lineTo(x: number, y: number): void 1467 1468从当前点到指定点进行路径连接。 1469 1470**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1471 1472**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1473 1474**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1475 1476**参数：** 1477 1478| 参数名 | 类型 | 必填 | 说明 | 1479| ---- | ------ | ---- | --------- | 1480| x | number | 是 | 指定位置的x坐标。<br>默认单位：vp。 | 1481| y | number | 是 | 指定位置的y坐标。<br>默认单位：vp。 | 1482 1483**示例：** 1484 1485 ```ts 1486 // xxx.ets 1487 @Entry 1488 @Component 1489 struct LineTo { 1490 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1491 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1492 1493 build() { 1494 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1495 Canvas(this.context) 1496 .width('100%') 1497 .height('100%') 1498 .backgroundColor('#ffff00') 1499 .onReady(() =>{ 1500 this.context.beginPath() 1501 this.context.moveTo(10, 10) 1502 this.context.lineTo(280, 160) 1503 this.context.stroke() 1504 }) 1505 } 1506 .width('100%') 1507 .height('100%') 1508 } 1509 } 1510 ``` 1511 1512  1513 1514 1515### closePath 1516 1517closePath(): void 1518 1519结束当前路径形成一个封闭路径。 1520 1521**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1522 1523**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1524 1525**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1526 1527**示例：** 1528 1529 ```ts 1530 // xxx.ets 1531 @Entry 1532 @Component 1533 struct ClosePath { 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.moveTo(30, 30) 1546 this.context.lineTo(110, 30) 1547 this.context.lineTo(70, 90) 1548 this.context.closePath() 1549 this.context.stroke() 1550 }) 1551 } 1552 .width('100%') 1553 .height('100%') 1554 } 1555 } 1556 ``` 1557 1558  1559 1560 1561### createPattern 1562 1563createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | null 1564 1565通过指定图像和重复方式创建图片填充的模板。 1566 1567**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1568 1569**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1570 1571**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1572 1573**参数：** 1574 1575| 参数名 | 类型 | 必填 | 说明 | 1576| ---------- | ---------- | ---- | ---------------------------------------- | 1577| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | 图源对象，具体参考ImageBitmap对象。 | 1578| repetition | string \| null | 是 | 设置图像重复的方式：<br>'repeat'：沿x轴和y轴重复绘制图像；<br>'repeat-x'：沿x轴重复绘制图像；<br>'repeat-y'：沿y轴重复绘制图像；<br>'no-repeat'：不重复绘制图像；<br>'clamp'：在原始边界外绘制时，超出部分使用边缘的颜色绘制；<br>'mirror'：沿x轴和y轴重复翻转绘制图像。 | 1579 1580**返回值：** 1581 1582| 类型 | 说明 | 1583| ---------------------------------------- | ----------------------- | 1584| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) \| null | 通过指定图像和重复方式创建图片填充的模板对象。 | 1585 1586**示例：** 1587 1588 ```ts 1589 // xxx.ets 1590 @Entry 1591 @Component 1592 struct CreatePattern { 1593 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1594 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1595 private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") 1596 1597 build() { 1598 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1599 Canvas(this.context) 1600 .width('100%') 1601 .height('100%') 1602 .backgroundColor('#ffff00') 1603 .onReady(() =>{ 1604 let pattern = this.context.createPattern(this.img, 'repeat') 1605 if (pattern) { 1606 this.context.fillStyle = pattern 1607 } 1608 this.context.fillRect(0, 0, 200, 200) 1609 }) 1610 } 1611 .width('100%') 1612 .height('100%') 1613 } 1614 } 1615 ``` 1616 1617  1618 1619 1620### bezierCurveTo 1621 1622bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void 1623 1624创建三次贝赛尔曲线的路径。 1625 1626**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1627 1628**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1629 1630**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1631 1632**参数：** 1633 1634| 参数名 | 类型 | 必填 | 说明 | 1635| ---- | ------ | ---- | -------------- | 1636| cp1x | number | 是 | 第一个贝塞尔参数的x坐标值。<br>默认单位：vp。 | 1637| cp1y | number | 是 | 第一个贝塞尔参数的y坐标值。<br>默认单位：vp。 | 1638| cp2x | number | 是 | 第二个贝塞尔参数的x坐标值。<br>默认单位：vp。 | 1639| cp2y | number | 是 | 第二个贝塞尔参数的y坐标值。<br>默认单位：vp。 | 1640| x | number | 是 | 路径结束时的x坐标值。<br>默认单位：vp。 | 1641| y | number | 是 | 路径结束时的y坐标值。<br>默认单位：vp。 | 1642 1643**示例：** 1644 1645 ```ts 1646 // xxx.ets 1647 @Entry 1648 @Component 1649 struct BezierCurveTo { 1650 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1651 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1652 1653 build() { 1654 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1655 Canvas(this.context) 1656 .width('100%') 1657 .height('100%') 1658 .backgroundColor('#ffff00') 1659 .onReady(() =>{ 1660 this.context.beginPath() 1661 this.context.moveTo(10, 10) 1662 this.context.bezierCurveTo(20, 100, 200, 100, 200, 20) 1663 this.context.stroke() 1664 }) 1665 } 1666 .width('100%') 1667 .height('100%') 1668 } 1669 } 1670 ``` 1671 1672  1673 1674 1675### quadraticCurveTo 1676 1677quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void 1678 1679创建二次贝赛尔曲线的路径。 1680 1681**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1682 1683**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1684 1685**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1686 1687**参数：** 1688 1689| 参数名 | 类型 | 必填 | 说明 | 1690| ---- | ------ | ---- | ----------- | 1691| cpx | number | 是 | 贝塞尔参数的x坐标值。<br>默认单位：vp。 | 1692| cpy | number | 是 | 贝塞尔参数的y坐标值。<br>默认单位：vp。 | 1693| x | number | 是 | 路径结束时的x坐标值。<br>默认单位：vp。 | 1694| y | number | 是 | 路径结束时的y坐标值。<br>默认单位：vp。 | 1695 1696**示例：** 1697 1698 ```ts 1699 // xxx.ets 1700 @Entry 1701 @Component 1702 struct QuadraticCurveTo { 1703 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1704 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1705 1706 build() { 1707 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1708 Canvas(this.context) 1709 .width('100%') 1710 .height('100%') 1711 .backgroundColor('#ffff00') 1712 .onReady(() =>{ 1713 this.context.beginPath() 1714 this.context.moveTo(20, 20) 1715 this.context.quadraticCurveTo(100, 100, 200, 20) 1716 this.context.stroke() 1717 }) 1718 } 1719 .width('100%') 1720 .height('100%') 1721 } 1722 } 1723 ``` 1724 1725  1726 1727 1728### arc 1729 1730arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void 1731 1732绘制弧线路径。 1733 1734**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1735 1736**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1737 1738**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1739 1740**参数：** 1741 1742| 参数名 | 类型 | 必填 | 说明 | 1743| ---------------- | ------- | ---- | ---------- | 1744| x | number | 是 | 弧线圆心的x坐标值。<br>默认单位：vp。 | 1745| y | number | 是 | 弧线圆心的y坐标值。<br>默认单位：vp。 | 1746| radius | number | 是 | 弧线的圆半径。<br>默认单位：vp。 | 1747| startAngle | number | 是 | 弧线的起始弧度。<br>单位：弧度 | 1748| endAngle | number | 是 | 弧线的终止弧度。<br>单位：弧度 | 1749| counterclockwise | boolean | 否 | 是否逆时针绘制圆弧。<br>true:逆时针方向绘制椭圆。<br>false:顺时针方向绘制椭圆。<br>默认值：false。 | 1750 1751**示例：** 1752 1753 ```ts 1754 // xxx.ets 1755 @Entry 1756 @Component 1757 struct Arc { 1758 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1759 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1760 1761 build() { 1762 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1763 Canvas(this.context) 1764 .width('100%') 1765 .height('100%') 1766 .backgroundColor('#ffff00') 1767 .onReady(() =>{ 1768 this.context.beginPath() 1769 this.context.arc(100, 75, 50, 0, 6.28) 1770 this.context.stroke() 1771 }) 1772 } 1773 .width('100%') 1774 .height('100%') 1775 } 1776 } 1777 ``` 1778 1779  1780 1781 1782### arcTo 1783 1784arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void 1785 1786依据给定的控制点和圆弧半径创建圆弧路径。 1787 1788**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1789 1790**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1791 1792**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1793 1794**参数：** 1795 1796| 参数名 | 类型 | 必填 | 说明 | 1797| ------ | ------ | ---- | --------------- | 1798| x1 | number | 是 | 第一个控制点的x坐标值。<br>默认单位：vp。 | 1799| y1 | number | 是 | 第一个控制点的y坐标值。<br>默认单位：vp。 | 1800| x2 | number | 是 | 第二个控制点的x坐标值。<br>默认单位：vp。 | 1801| y2 | number | 是 | 第二个控制点的y坐标值。<br>默认单位：vp。 | 1802| radius | number | 是 | 圆弧的圆半径值。<br>默认单位：vp。 | 1803 1804**示例：** 1805 1806 ```ts 1807 // xxx.ets 1808 @Entry 1809 @Component 1810 struct ArcTo { 1811 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1812 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1813 1814 build() { 1815 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1816 Canvas(this.context) 1817 .width('100%') 1818 .height('100%') 1819 .backgroundColor('#ffff00') 1820 .onReady(() =>{ 1821 // 切线 1822 this.context.beginPath() 1823 this.context.strokeStyle = '#808080' 1824 this.context.lineWidth = 1.5; 1825 this.context.moveTo(360, 20); 1826 this.context.lineTo(360, 170); 1827 this.context.lineTo(110, 170); 1828 this.context.stroke(); 1829 1830 // 圆弧 1831 this.context.beginPath() 1832 this.context.strokeStyle = '#000000' 1833 this.context.lineWidth = 3; 1834 this.context.moveTo(360, 20) 1835 this.context.arcTo(360, 170, 110, 170, 150) 1836 this.context.stroke() 1837 1838 // 起始点 1839 this.context.beginPath(); 1840 this.context.fillStyle = '#00ff00'; 1841 this.context.arc(360, 20, 4, 0, 2 * Math.PI); 1842 this.context.fill(); 1843 1844 // 控制点 1845 this.context.beginPath(); 1846 this.context.fillStyle = '#ff0000'; 1847 this.context.arc(360, 170, 4, 0, 2 * Math.PI); 1848 this.context.arc(110, 170, 4, 0, 2 * Math.PI); 1849 this.context.fill(); 1850 }) 1851 } 1852 .width('100%') 1853 .height('100%') 1854 } 1855 } 1856 ``` 1857 1858  1859 1860 > 此示例中，arcTo()创建的圆弧为黑色，圆弧的两条切线为灰色。控制点为红色，起始点为绿色。 1861 > 1862 > 可以想象两条切线：一条切线从起始点到第一个控制点，另一条切线从第一个控制点到第二个控制点。arcTo()在这两条切线间创建一个圆弧，并使圆弧与这两条切线都相切。 1863 1864 1865### ellipse 1866 1867ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void 1868 1869在规定的矩形区域绘制一个椭圆。 1870 1871**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1872 1873**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1874 1875**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1876 1877**参数：** 1878 1879| 参数名 | 类型 | 必填 | 说明 | 1880| ---------------- | ------- | ---- | ---------------------------------------- | 1881| x | number | 是 | 椭圆圆心的x轴坐标。<br>默认单位：vp。 | 1882| y | number | 是 | 椭圆圆心的y轴坐标。<br>默认单位：vp。 | 1883| radiusX | number | 是 | 椭圆x轴的半径长度。<br>默认单位：vp。 | 1884| radiusY | number | 是 | 椭圆y轴的半径长度。<br>默认单位：vp。 | 1885| rotation | number | 是 | 椭圆的旋转角度。<br>单位：弧度。 | 1886| startAngle | number | 是 | 椭圆绘制的起始点角度。<br>单位：弧度。 | 1887| endAngle | number | 是 | 椭圆绘制的结束点角度。<br>单位：弧度。 | 1888| counterclockwise | boolean | 否 | 是否以逆时针方向绘制椭圆。<br>true:逆时针方向绘制椭圆。<br>false:顺时针方向绘制椭圆。<br>默认值：false。 | 1889 1890**示例：** 1891 1892 ```ts 1893 // xxx.ets 1894 @Entry 1895 @Component 1896 struct CanvasExample { 1897 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1898 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1899 1900 build() { 1901 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1902 Canvas(this.context) 1903 .width('100%') 1904 .height('100%') 1905 .backgroundColor('#ffff00') 1906 .onReady(() =>{ 1907 this.context.beginPath() 1908 this.context.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI * 2, false) 1909 this.context.stroke() 1910 this.context.beginPath() 1911 this.context.ellipse(200, 300, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI * 2, true) 1912 this.context.stroke() 1913 }) 1914 } 1915 .width('100%') 1916 .height('100%') 1917 } 1918 } 1919 ``` 1920 1921  1922 1923 1924### rect 1925 1926rect(x: number, y: number, w: number, h: number): void 1927 1928创建矩形路径。 1929 1930**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1931 1932**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1933 1934**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1935 1936**参数：** 1937 1938| 参数名 | 类型 | 必填 | 说明 | 1939| ---- | ------ | ---- | ------------- | 1940| x | number | 是 | 指定矩形的左上角x坐标值。<br>默认单位：vp。 | 1941| y | number | 是 | 指定矩形的左上角y坐标值。<br>默认单位：vp。 | 1942| w | number | 是 | 指定矩形的宽度。<br>默认单位：vp。 | 1943| h | number | 是 | 指定矩形的高度。<br>默认单位：vp。 | 1944 1945**示例：** 1946 1947 ```ts 1948 // xxx.ets 1949 @Entry 1950 @Component 1951 struct CanvasExample { 1952 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1953 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1954 1955 build() { 1956 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1957 Canvas(this.context) 1958 .width('100%') 1959 .height('100%') 1960 .backgroundColor('#ffff00') 1961 .onReady(() =>{ 1962 this.context.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20) 1963 this.context.stroke() 1964 }) 1965 } 1966 .width('100%') 1967 .height('100%') 1968 } 1969 } 1970 ``` 1971 1972  1973 1974 1975### fill 1976 1977fill(fillRule?: CanvasFillRule): void 1978 1979对封闭路径进行填充。 1980 1981**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1982 1983**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1984 1985**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1986 1987**参数:** 1988 1989| 参数名 | 类型 | 必填 | 说明 | 1990| -------- | -------------- | ---- | ---------------------------------------- | 1991| fillRule | [CanvasFillRule](ts-canvasrenderingcontext2d.md#canvasfillrule) | 否 | 指定要填充对象的规则。<br/>可选参数为："nonzero", "evenodd"。<br>默认值："nonzero"。 | 1992 1993 1994**示例:** 1995 1996 ```ts 1997 // xxx.ets 1998 @Entry 1999 @Component 2000 struct Fill { 2001 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2002 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2003 2004 build() { 2005 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2006 Canvas(this.context) 2007 .width('100%') 2008 .height('100%') 2009 .backgroundColor('#ffff00') 2010 .onReady(() =>{ 2011 this.context.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20) 2012 this.context.fill() 2013 }) 2014 } 2015 .width('100%') 2016 .height('100%') 2017 } 2018 } 2019 ``` 2020 2021  2022 2023 2024fill(path: Path2D, fillRule?: CanvasFillRule): void 2025 2026对封闭路径进行填充。 2027 2028**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2029 2030**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2031 2032**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2033 2034**参数:** 2035 2036| 参数名 | 类型 | 必填 | 说明 | 2037| -------- | -------------- | ---- | ---------------------------------------- | 2038| path | [Path2D](ts-components-canvas-path2d.md) | 是 | Path2D填充路径。 | 2039| fillRule | [CanvasFillRule](ts-canvasrenderingcontext2d.md#canvasfillrule) | 否 | 指定要填充对象的规则。<br/>可选参数为："nonzero", "evenodd"。<br>默认值："nonzero"。 | 2040 2041 2042**示例:** 2043 2044```ts 2045// xxx.ets 2046@Entry 2047@Component 2048struct Fill { 2049 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2050 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2051 2052 build() { 2053 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2054 Canvas(this.context) 2055 .width('100%') 2056 .height('100%') 2057 .backgroundColor('#ffff00') 2058 .onReady(() =>{ 2059 let region = new Path2D() 2060 region.moveTo(30, 90) 2061 region.lineTo(110, 20) 2062 region.lineTo(240, 130) 2063 region.lineTo(60, 130) 2064 region.lineTo(190, 20) 2065 region.lineTo(270, 90) 2066 region.closePath() 2067 // Fill path 2068 this.context.fillStyle = '#00ff00' 2069 this.context.fill(region, "evenodd") 2070 }) 2071 } 2072 .width('100%') 2073 .height('100%') 2074 } 2075} 2076``` 2077 2078  2079 2080 2081### clip 2082 2083clip(fillRule?: CanvasFillRule): void 2084 2085设置当前路径为剪切路径。 2086 2087**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2088 2089**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2090 2091**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2092 2093**参数:** 2094 2095| 参数名 | 类型 | 必填 | 说明 | 2096| -------- | -------------- | ---- | ---------------------------------------- | 2097| fillRule | [CanvasFillRule](#canvasfillrule) | 否 | 指定要剪切对象的规则。<br/>可选参数为："nonzero", "evenodd"。 <br>默认值："nonzero"。 | 2098 2099**示例:** 2100 2101 ```ts 2102 // xxx.ets 2103 @Entry 2104 @Component 2105 struct Clip { 2106 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2107 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2108 2109 build() { 2110 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2111 Canvas(this.context) 2112 .width('100%') 2113 .height('100%') 2114 .backgroundColor('#ffff00') 2115 .onReady(() =>{ 2116 this.context.rect(0, 0, 100, 200) 2117 this.context.stroke() 2118 this.context.clip() 2119 this.context.fillStyle = "rgb(255,0,0)" 2120 this.context.fillRect(0, 0, 200, 200) 2121 }) 2122 } 2123 .width('100%') 2124 .height('100%') 2125 } 2126 } 2127 ``` 2128 2129  2130 2131 2132clip(path: Path2D, fillRule?: CanvasFillRule): void 2133 2134设置当前路径为剪切路径 2135 2136**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2137 2138**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2139 2140**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2141 2142**参数:** 2143 2144| 参数名 | 类型 | 必填 | 说明 | 2145| -------- | -------------- | ---- | ---------------------------------------- | 2146| path | [Path2D](ts-components-canvas-path2d.md) | 是 | Path2D剪切路径。 | 2147| fillRule | [CanvasFillRule](#canvasfillrule) | 否 | 指定要剪切对象的规则。<br/>可选参数为："nonzero", "evenodd"。 <br>默认值："nonzero"。 | 2148 2149 2150**示例:** 2151 2152 ```ts 2153 // xxx.ets 2154 @Entry 2155 @Component 2156 struct Clip { 2157 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2158 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2159 build() { 2160 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2161 Canvas(this.context) 2162 .width('100%') 2163 .height('100%') 2164 .backgroundColor('#ffff00') 2165 .onReady(() =>{ 2166 let region = new Path2D() 2167 region.moveTo(30, 90) 2168 region.lineTo(110, 20) 2169 region.lineTo(240, 130) 2170 region.lineTo(60, 130) 2171 region.lineTo(190, 20) 2172 region.lineTo(270, 90) 2173 region.closePath() 2174 this.context.clip(region,"evenodd") 2175 this.context.fillStyle = "rgb(0,255,0)" 2176 this.context.fillRect(0, 0, this.context.width, this.context.height) 2177 }) 2178 } 2179 .width('100%') 2180 .height('100%') 2181 } 2182 } 2183 ``` 2184 2185  2186 2187 2188### reset<sup>12+</sup> 2189 2190reset(): void 2191 2192将CanvasRenderingContext2D重置为其默认状态，清除后台缓冲区、绘制状态栈、绘制路径和样式。 2193 2194**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 2195 2196**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2197 2198**示例：** 2199 2200 ```ts 2201 // xxx.ets 2202 @Entry 2203 @Component 2204 struct Reset { 2205 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2206 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2207 2208 build() { 2209 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2210 Canvas(this.context) 2211 .width('100%') 2212 .height('100%') 2213 .backgroundColor('#ffff00') 2214 .onReady(() =>{ 2215 this.context.fillStyle = '#0000ff' 2216 this.context.fillRect(20, 20, 150, 100) 2217 this.context.reset() 2218 this.context.fillRect(20, 150, 150, 100) 2219 }) 2220 } 2221 .width('100%') 2222 .height('100%') 2223 } 2224 } 2225 ``` 2226 2227  2228 2229 2230### saveLayer<sup>12+</sup> 2231 2232saveLayer(): void 2233 2234创建一个图层。 2235 2236**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 2237 2238**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2239 2240**示例：** 2241 2242 ```ts 2243 // xxx.ets 2244 @Entry 2245 @Component 2246 struct saveLayer { 2247 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2248 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 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.fillStyle = "#0000ff" 2258 this.context.fillRect(50,100,300,100) 2259 this.context.fillStyle = "#00ffff" 2260 this.context.fillRect(50,150,300,100) 2261 this.context.globalCompositeOperation = 'destination-over' 2262 this.context.saveLayer() 2263 this.context.globalCompositeOperation = 'source-over' 2264 this.context.fillStyle = "#ff0000" 2265 this.context.fillRect(100,50,100,300) 2266 this.context.fillStyle = "#00ff00" 2267 this.context.fillRect(150,50,100,300) 2268 this.context.restoreLayer() 2269 }) 2270 } 2271 .width('100%') 2272 .height('100%') 2273 } 2274 } 2275 2276 ``` 2277  2278 2279### restoreLayer<sup>12+</sup> 2280 2281restoreLayer(): void 2282 2283恢复图像变换和裁剪状态至saveLayer前的状态，并将图层绘制在canvas上。restoreLayer示例代码同saveLayer。 2284 2285**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 2286 2287**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2288 2289### resetTransform 2290 2291resetTransform(): void 2292 2293使用单位矩阵重新设置当前矩阵。 2294 2295**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2296 2297**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2298 2299**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2300 2301**示例：** 2302 2303 ```ts 2304 // xxx.ets 2305 @Entry 2306 @Component 2307 struct ResetTransform { 2308 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2309 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2310 2311 build() { 2312 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2313 Canvas(this.context) 2314 .width('100%') 2315 .height('100%') 2316 .backgroundColor('#ffff00') 2317 .onReady(() =>{ 2318 this.context.setTransform(1,0.5, -0.5, 1, 10, 10) 2319 this.context.fillStyle = 'rgb(0,0,255)' 2320 this.context.fillRect(0, 0, 100, 100) 2321 this.context.resetTransform() 2322 this.context.fillStyle = 'rgb(255,0,0)' 2323 this.context.fillRect(0, 0, 100, 100) 2324 }) 2325 } 2326 .width('100%') 2327 .height('100%') 2328 } 2329 } 2330 ``` 2331 2332  2333 2334### rotate 2335 2336rotate(angle: number): void 2337 2338针对当前坐标轴进行顺时针旋转。 2339 2340**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2341 2342**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2343 2344**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2345 2346**参数：** 2347 2348| 参数名 | 类型 | 必填 | 说明 | 2349| ----- | ------ | ---- | ---------------------------------------- | 2350| angle | number | 是 | 设置顺时针旋转的弧度值，可以通过 degree * Math.PI / 180 将角度转换为弧度值。<br>单位：弧度。 | 2351 2352**示例：** 2353 2354 ```ts 2355 // xxx.ets 2356 @Entry 2357 @Component 2358 struct Rotate { 2359 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2360 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2361 2362 build() { 2363 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2364 Canvas(this.context) 2365 .width('100%') 2366 .height('100%') 2367 .backgroundColor('#ffff00') 2368 .onReady(() =>{ 2369 this.context.rotate(45 * Math.PI / 180) 2370 this.context.fillRect(70, 20, 50, 50) 2371 }) 2372 } 2373 .width('100%') 2374 .height('100%') 2375 } 2376 } 2377 ``` 2378 2379  2380 2381 2382### scale 2383 2384scale(x: number, y: number): void 2385 2386设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。 2387 2388**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2389 2390**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2391 2392**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2393 2394**参数：** 2395 2396| 参数名 | 类型 | 必填 | 说明 | 2397| ---- | ------ | ---- | ----------- | 2398| x | number | 是 | 设置水平方向的缩放值。 | 2399| y | number | 是 | 设置垂直方向的缩放值。 | 2400 2401**示例：** 2402 2403 ```ts 2404 // xxx.ets 2405 @Entry 2406 @Component 2407 struct Scale { 2408 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2409 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2410 2411 build() { 2412 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2413 Canvas(this.context) 2414 .width('100%') 2415 .height('100%') 2416 .backgroundColor('#ffff00') 2417 .onReady(() =>{ 2418 this.context.lineWidth = 3 2419 this.context.strokeRect(30, 30, 50, 50) 2420 this.context.scale(2, 2) // Scale to 200% 2421 this.context.strokeRect(30, 30, 50, 50) 2422 }) 2423 } 2424 .width('100%') 2425 .height('100%') 2426 } 2427 } 2428 ``` 2429 2430  2431 2432 2433### transform 2434 2435transform(a: number, b: number, c: number, d: number, e: number, f: number): void 2436 2437transform方法对应一个变换矩阵，想对一个图形进行变化的时候，只要设置此变换矩阵相应的参数，对图形的各个定点的坐标分别乘以这个矩阵，就能得到新的定点的坐标。矩阵变换效果可叠加。 2438 2439**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2440 2441**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2442 2443**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2444 2445> **说明：** 2446> 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）： 2447> 2448> - x' = scaleX \* x + skewY \* y + translateX 2449> 2450> - y' = skewX \* x + scaleY \* y + translateY 2451 2452**参数：** 2453 2454| 参数名 | 类型 | 必填 | 说明 | 2455| ---- | ------ | ---- | -------------------- | 2456| a | number | 是 | scaleX: 指定水平缩放值。 | 2457| b | number | 是 | skewY: 指定垂直倾斜值。 | 2458| c | number | 是 | skewX: 指定水平倾斜值。 | 2459| d | number | 是 | scaleY: 指定垂直缩放值。 | 2460| e | number | 是 | translateX: 指定水平移动值。<br>默认单位：vp。 | 2461| f | number | 是 | translateY: 指定垂直移动值。<br>默认单位：vp。 | 2462 2463**示例：** 2464 2465 ```ts 2466 // xxx.ets 2467 @Entry 2468 @Component 2469 struct Transform { 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 this.context.fillStyle = 'rgb(0,0,0)' 2481 this.context.fillRect(0, 0, 100, 100) 2482 this.context.transform(1, 0.5, -0.5, 1, 10, 10) 2483 this.context.fillStyle = 'rgb(255,0,0)' 2484 this.context.fillRect(0, 0, 100, 100) 2485 this.context.transform(1, 0.5, -0.5, 1, 10, 10) 2486 this.context.fillStyle = 'rgb(0,0,255)' 2487 this.context.fillRect(0, 0, 100, 100) 2488 }) 2489 } 2490 .width('100%') 2491 .height('100%') 2492 } 2493 } 2494 ``` 2495 2496  2497 2498 2499### setTransform 2500 2501setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void 2502 2503setTransform方法使用的参数和transform()方法相同，但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。 2504 2505**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2506 2507**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2508 2509**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2510 2511**参数：** 2512 2513| 参数名 | 类型 | 必填 | 说明 | 2514| ---- | ------ | ---- | -------------------- | 2515| a | number | 是 | scaleX: 指定水平缩放值。 | 2516| b | number | 是 | skewY: 指定垂直倾斜值。 | 2517| c | number | 是 | skewX: 指定水平倾斜值。 | 2518| d | number | 是 | scaleY: 指定垂直缩放值。 | 2519| e | number | 是 | translateX: 指定水平移动值。<br>默认单位：vp。 | 2520| f | number | 是 | translateY: 指定垂直移动值。<br>默认单位：vp。 | 2521 2522**示例：** 2523 2524 ```ts 2525 // xxx.ets 2526 @Entry 2527 @Component 2528 struct SetTransform { 2529 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2530 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2531 2532 build() { 2533 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2534 Canvas(this.context) 2535 .width('100%') 2536 .height('100%') 2537 .backgroundColor('#ffff00') 2538 .onReady(() =>{ 2539 this.context.fillStyle = 'rgb(255,0,0)' 2540 this.context.fillRect(0, 0, 100, 100) 2541 this.context.setTransform(1,0.5, -0.5, 1, 10, 10) 2542 this.context.fillStyle = 'rgb(0,0,255)' 2543 this.context.fillRect(0, 0, 100, 100) 2544 }) 2545 } 2546 .width('100%') 2547 .height('100%') 2548 } 2549 } 2550 ``` 2551 2552  2553 2554### setTransform 2555 2556setTransform(transform?: Matrix2D): void 2557 2558以Matrix2D对象为模板重置现有的变换矩阵并创建新的变换矩阵。 2559 2560**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2561 2562**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2563 2564**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2565 2566**参数：** 2567 2568| 参数名 | 类型 | 必填 | 说明 | 2569| --------- | ---------------------------------------- | ---- | ----- | 2570| transform | [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | 否 | 变换矩阵。<br>默认值：null。 | 2571 2572**示例：** 2573 2574 ```ts 2575 // xxx.ets 2576 @Entry 2577 @Component 2578 struct TransFormDemo { 2579 private settings: RenderingContextSettings = new RenderingContextSettings(true); 2580 private context1: CanvasRenderingContext2D = new CanvasRenderingContext2D(this. settings); 2581 private context2: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2582 2583 build() { 2584 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2585 Text('context1'); 2586 Canvas(this.context1) 2587 .width('230vp') 2588 .height('160vp') 2589 .backgroundColor('#ffff00') 2590 .onReady(() =>{ 2591 this.context1.fillRect(100, 20, 50, 50); 2592 this.context1.setTransform(1, 0.5, -0.5, 1, 10, 10); 2593 this.context1.fillRect(100, 20, 50, 50); 2594 }) 2595 Text('context2'); 2596 Canvas(this.context2) 2597 .width('230vp') 2598 .height('160vp') 2599 .backgroundColor('#0ffff0') 2600 .onReady(() =>{ 2601 this.context2.fillRect(100, 20, 50, 50); 2602 let storedTransform = this.context1.getTransform(); 2603 this.context2.setTransform(storedTransform); 2604 this.context2.fillRect(100, 20, 50, 50); 2605 }) 2606 } 2607 .width('100%') 2608 .height('100%') 2609 } 2610 } 2611 ``` 2612 2613  2614 2615### getTransform 2616 2617getTransform(): Matrix2D 2618 2619获取当前被应用到上下文的转换矩阵。 2620 2621**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2622 2623**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2624 2625**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2626 2627**返回值：** 2628 2629| 类型 | 说明 | 2630| ---------------------------------------- | ----- | 2631| [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | 矩阵对象。 | 2632 2633**示例：** 2634 2635 ```ts 2636 // xxx.ets 2637 @Entry 2638 @Component 2639 struct TransFormDemo { 2640 private settings: RenderingContextSettings = new RenderingContextSettings(true); 2641 private context1: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2642 private context2: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2643 2644 build() { 2645 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2646 Text('context1'); 2647 Canvas(this.context1) 2648 .width('230vp') 2649 .height('120vp') 2650 .backgroundColor('#ffff00') 2651 .onReady(() =>{ 2652 this.context1.fillRect(50, 50, 50, 50); 2653 this.context1.setTransform(1.2, Math.PI/8, Math.PI/6, 0.5, 30, -25); 2654 this.context1.fillRect(50, 50, 50, 50); 2655 }) 2656 Text('context2'); 2657 Canvas(this.context2) 2658 .width('230vp') 2659 .height('120vp') 2660 .backgroundColor('#0ffff0') 2661 .onReady(() =>{ 2662 this.context2.fillRect(50, 50, 50, 50); 2663 let storedTransform = this.context1.getTransform(); 2664 console.log("Matrix [scaleX = " + storedTransform.scaleX + ", scaleY = " + storedTransform.scaleY + 2665 ", rotateX = " + storedTransform.rotateX + ", rotateY = " + storedTransform.rotateY + 2666 ", translateX = " + storedTransform.translateX + ", translateY = " + storedTransform.translateY + "]") 2667 this.context2.setTransform(storedTransform); 2668 this.context2.fillRect(50,50,50,50); 2669 }) 2670 } 2671 .width('100%') 2672 .height('100%') 2673 } 2674 } 2675 ``` 2676 2677  2678 2679### translate 2680 2681translate(x: number, y: number): void 2682 2683移动当前坐标系的原点。 2684 2685**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2686 2687**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2688 2689**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2690 2691**参数：** 2692 2693| 参数名 | 类型 | 必填 | 说明 | 2694| ---- | ------ | ---- | -------- | 2695| x | number | 是 | 设置水平平移量。<br>默认单位：vp。 | 2696| y | number | 是 | 设置竖直平移量。<br>默认单位：vp。 | 2697 2698**示例：** 2699 2700 ```ts 2701 // xxx.ets 2702 @Entry 2703 @Component 2704 struct Translate { 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 this.context.fillRect(10, 10, 50, 50) 2716 this.context.translate(70, 70) 2717 this.context.fillRect(10, 10, 50, 50) 2718 }) 2719 } 2720 .width('100%') 2721 .height('100%') 2722 } 2723 } 2724 ``` 2725 2726  2727 2728 2729### drawImage 2730 2731drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number): void 2732 2733进行图像绘制。 2734 2735**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用，卡片中不支持PixelMap对象。 2736 2737**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2738 2739**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2740 2741**参数：** 2742 2743| 参数名 | 类型 | 必填 | 说明 | 2744| ----- | ---------------------------------------- | ---- | ---------------------------------------- | 2745| image | [ImageBitmap](ts-components-canvas-imagebitmap.md)或[PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7) | 是 | 图片资源，请参考ImageBitmap或PixelMap。 | 2746| dx | number | 是 | 绘制区域左上角在x轴的位置。<br>默认单位：vp。| 2747| dy | number | 是 | 绘制区域左上角在y轴的位置。<br>默认单位：vp。| 2748 2749drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number, dw: number, dh: number): void 2750 2751进行图像绘制。 2752 2753**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用，卡片中不支持PixelMap对象。 2754 2755**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2756 2757**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2758 2759**参数：** 2760 2761| 参数名 | 类型 | 必填 | 说明 | 2762| ----- | ---------------------------------------- | ---- | ---------------------------------------- | 2763| image | [ImageBitmap](ts-components-canvas-imagebitmap.md)或[PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7) | 是 | 图片资源，请参考ImageBitmap或PixelMap。 | 2764| dx | number | 是 | 绘制区域左上角在x轴的位置。<br>默认单位：vp。| 2765| dy | number | 是 | 绘制区域左上角在y轴的位置。<br>默认单位：vp。| 2766| dw | number | 是 | 绘制区域的宽度。当绘制区域的宽度和裁剪图像的宽度不一致时，将图像宽度拉伸或压缩为绘制区域的宽度。<br>默认单位：vp。 | 2767| dh | number | 是 | 绘制区域的高度。当绘制区域的高度和裁剪图像的高度不一致时，将图像高度拉伸或压缩为绘制区域的高度。<br>默认单位：vp。 | 2768 2769drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void 2770 2771进行图像绘制。 2772 2773**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用，卡片中不支持PixelMap对象。 2774 2775**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2776 2777**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2778 2779**参数：** 2780 2781| 参数名 | 类型 | 必填 | 说明 | 2782| ----- | ---------------------------------------- | ---- | ---------------------------------------- | 2783| image | [ImageBitmap](ts-components-canvas-imagebitmap.md)或[PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7) | 是 | 图片资源，请参考ImageBitmap或PixelMap。 | 2784| sx | number | 是 | 裁切源图像时距离源图像左上角的x坐标值。<br>image类型为ImageBitmap时，默认单位：vp。<br>image类型为PixelMap时，单位：px。 | 2785| sy | number | 是 | 裁切源图像时距离源图像左上角的y坐标值。<br>image类型为ImageBitmap时，默认单位：vp。<br>image类型为PixelMap时，单位：px。 | 2786| sw | number | 是 | 裁切源图像时需要裁切的宽度。<br>image类型为ImageBitmap时，默认单位：vp。<br>image类型为PixelMap时，单位：px。 | 2787| sh | number | 是 | 裁切源图像时需要裁切的高度。<br>image类型为ImageBitmap时，默认单位：vp。<br>image类型为PixelMap时，单位：px。 | 2788| dx | number | 是 | 绘制区域左上角在x轴的位置。<br>默认单位：vp。| 2789| dy | number | 是 | 绘制区域左上角在y轴的位置。<br>默认单位：vp。| 2790| dw | number | 是 | 绘制区域的宽度。当绘制区域的宽度和裁剪图像的宽度不一致时，将图像宽度拉伸或压缩为绘制区域的宽度。<br>默认单位：vp。 | 2791| dh | number | 是 | 绘制区域的高度。当绘制区域的高度和裁剪图像的高度不一致时，将图像高度拉伸或压缩为绘制区域的高度。<br>默认单位：vp。 | 2792 2793**示例：** 2794 2795 ```ts 2796 // xxx.ets 2797 @Entry 2798 @Component 2799 struct ImageExample { 2800 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2801 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2802 private img: ImageBitmap = new ImageBitmap("common/images/example.jpg") 2803 2804 build() { 2805 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2806 Canvas(this.context) 2807 .width('100%') 2808 .height('100%') 2809 .backgroundColor('#ffff00') 2810 .onReady(() => { 2811 this.context.drawImage(this.img, 0, 0) 2812 this.context.drawImage(this.img, 0, 150, 300, 100) 2813 this.context.drawImage(this.img, 0, 0, 500, 500, 0, 300, 400, 200) 2814 }) 2815 } 2816 .width('100%') 2817 .height('100%') 2818 } 2819 } 2820 ``` 2821 2822  2823 2824 2825### createImageData 2826 2827createImageData(sw: number, sh: number): ImageData 2828 2829创建新的、空白的、指定大小的ImageData 对象，请参考[ImageData](ts-components-canvas-imagedata.md)，该接口存在内存拷贝行为，高耗时，应避免频繁使用。createImageData示例同putImageData。 2830 2831**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2832 2833**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2834 2835**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2836 2837**参数：** 2838 2839| 参数名 | 类型 | 必填 | 说明 | 2840| ---- | ------ | ---- | ------------- | 2841| sw | number | 是 | ImageData的宽度。<br>默认单位：vp。 | 2842| sh | number | 是 | ImageData的高度。<br>默认单位：vp。 | 2843 2844 2845createImageData(imageData: ImageData): ImageData 2846 2847根据一个现有的ImageData对象重新创建一个宽、高相同的ImageData对象（不会复制图像数据），请参考[ImageData](ts-components-canvas-imagedata.md)，该接口存在内存拷贝行为，高耗时，应避免频繁使用。createImageData示例同putImageData。 2848 2849**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2850 2851**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2852 2853**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2854 2855**参数：** 2856 2857| 参数名 | 类型 | 必填 | 说明 | 2858| --------- | ---------------------------------------- | ---- | ----------------- | 2859| imagedata | [ImageData](ts-components-canvas-imagedata.md) | 是 | 现有的ImageData对象。 | 2860 2861 **返回值：** 2862 2863| 类型 | 说明 | 2864| ---------------------------------------- | -------------- | 2865| [ImageData](ts-components-canvas-imagedata.md) | 新的ImageData对象。 | 2866 2867 2868### getPixelMap 2869 2870getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap 2871 2872以当前canvas指定区域内的像素创建[PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7)对象，该接口存在内存拷贝行为，高耗时，应避免频繁使用。 2873 2874**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2875 2876**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2877 2878**参数：** 2879 2880| 参数名 | 类型 | 必填 | 说明 | 2881| ---- | ------ | ---- | --------------- | 2882| sx | number | 是 | 需要输出的区域的左上角x坐标。<br>默认单位：vp。 | 2883| sy | number | 是 | 需要输出的区域的左上角y坐标。<br>默认单位：vp。 | 2884| sw | number | 是 | 需要输出的区域的宽度。<br>默认单位：vp。 | 2885| sh | number | 是 | 需要输出的区域的高度。<br>默认单位：vp。 | 2886 2887**返回值：** 2888 2889| 类型 | 说明 | 2890| ---------------------------------------- | ------------- | 2891| [PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7) | 新的PixelMap对象。 | 2892 2893**示例：** 2894 2895 ```ts 2896 // xxx.ets 2897 @Entry 2898 @Component 2899 struct GetPixelMap { 2900 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2901 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2902 private img: ImageBitmap = new ImageBitmap("common/images/example.jpg") 2903 2904 build() { 2905 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2906 Canvas(this.context) 2907 .width('100%') 2908 .height('100%') 2909 .backgroundColor('#ffff00') 2910 .onReady(() => { 2911 this.context.drawImage(this.img, 100, 100, 130, 130) 2912 let pixelmap = this.context.getPixelMap(150, 150, 130, 130) 2913 this.context.setPixelMap(pixelmap) 2914 }) 2915 } 2916 .width('100%') 2917 .height('100%') 2918 } 2919 } 2920 ``` 2921 2922  2923 2924### setPixelMap 2925 2926setPixelMap(value?: PixelMap): void 2927 2928将当前传入[PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7)对象绘制在画布上。setPixelMap示例同getPixelMap。 2929 2930**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2931 2932**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2933 2934 **参数：** 2935 2936| 参数名 | 类型 | 必填 | 说明 | 2937| ---- | ------ | ---- | --------------- | 2938| value | [PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7) | 否 | 包含像素值的PixelMap对象<br>默认值：null。 | 2939 2940### getImageData 2941 2942getImageData(sx: number, sy: number, sw: number, sh: number): ImageData 2943 2944以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagedata.md)对象，该接口存在内存拷贝行为，高耗时，应避免频繁使用。 2945 2946**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2947 2948**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2949 2950**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2951 2952**参数：** 2953 2954| 参数名 | 类型 | 必填 | 说明 | 2955| ---- | ------ | ---- | --------------- | 2956| sx | number | 是 | 需要输出的区域的左上角x坐标。<br>默认单位：vp。 | 2957| sy | number | 是 | 需要输出的区域的左上角y坐标。<br>默认单位：vp。 | 2958| sw | number | 是 | 需要输出的区域的宽度。<br>默认单位：vp。 | 2959| sh | number | 是 | 需要输出的区域的高度。<br>默认单位：vp。 | 2960 2961 **返回值：** 2962 2963| 类型 | 说明 | 2964| ---------------------------------------- | -------------- | 2965| [ImageData](ts-components-canvas-imagedata.md) | 新的ImageData对象。 | 2966 2967 2968**示例：** 2969 2970 ```ts 2971 // xxx.ets 2972 @Entry 2973 @Component 2974 struct GetImageData { 2975 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2976 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2977 private img:ImageBitmap = new ImageBitmap("/common/images/1234.png") 2978 2979 build() { 2980 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2981 Canvas(this.context) 2982 .width('100%') 2983 .height('100%') 2984 .backgroundColor('#ffff00') 2985 .onReady(() =>{ 2986 this.context.drawImage(this.img,0,0,130,130) 2987 let imagedata = this.context.getImageData(50,50,130,130) 2988 this.context.putImageData(imagedata,150,150) 2989 }) 2990 } 2991 .width('100%') 2992 .height('100%') 2993 } 2994 } 2995 ``` 2996 2997  2998 2999 3000### putImageData 3001 3002putImageData(imageData: ImageData, dx: number | string, dy: number | string): void 3003 3004使用[ImageData](ts-components-canvas-imagedata.md)数据填充新的矩形区域。 3005 3006**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3007 3008**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3009 3010**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3011 3012**参数：** 3013 3014| 参数名 | 类型 | 必填 | 说明 | 3015| ----------- | ---------------------------------------- | ---- | ----------------------------- | 3016| imagedata | [ImageData](ts-components-canvas-imagedata.md) | 是 | 包含像素值的ImageData对象。 | 3017| dx | number \| string<sup>10+</sup> | 是 | 填充区域在x轴方向的偏移量。<br>默认单位：vp。 | 3018| dy | number \| string<sup>10+</sup> | 是 | 填充区域在y轴方向的偏移量。<br>默认单位：vp。 | 3019 3020putImageData(imageData: ImageData, dx: number | string, dy: number | string, dirtyX: number | string, dirtyY: number | string, dirtyWidth: number | string, dirtyHeight: number | string): void 3021 3022使用[ImageData](ts-components-canvas-imagedata.md)数据填充新的矩形区域。 3023 3024**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3025 3026**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3027 3028**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3029 3030**参数：** 3031 3032| 参数名 | 类型 | 必填 | 说明 | 3033| ----------- | ---------------------------------------- | ---- | ----------------------------- | 3034| imagedata | [ImageData](ts-components-canvas-imagedata.md) | 是 | 包含像素值的ImageData对象。 | 3035| dx | number \| string<sup>10+</sup> | 是 | 填充区域在x轴方向的偏移量。<br>默认单位：vp。 | 3036| dy | number \| string<sup>10+</sup> | 是 | 填充区域在y轴方向的偏移量。<br>默认单位：vp。 | 3037| dirtyX | number \| string<sup>10+</sup> | 是 | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。<br>默认单位：vp。 | 3038| dirtyY | number \| string<sup>10+</sup> | 是 | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。<br>默认单位：vp。 | 3039| dirtyWidth | number \| string<sup>10+</sup> | 是 | 源图像数据矩形裁切范围的宽度。<br>默认单位：vp。 | 3040| dirtyHeight | number \| string<sup>10+</sup> | 是 | 源图像数据矩形裁切范围的高度。<br>默认单位：vp。 | 3041 3042**示例：** 3043 3044 ```ts 3045 // xxx.ets 3046 @Entry 3047 @Component 3048 struct PutImageData { 3049 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3050 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3051 3052 build() { 3053 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3054 Canvas(this.context) 3055 .width('100%') 3056 .height('100%') 3057 .backgroundColor('#ffff00') 3058 .onReady(() => { 3059 let imageDataNum = this.context.createImageData(100, 100) 3060 let imageData = this.context.createImageData(imageDataNum) 3061 for (let i = 0; i < imageData.data.length; i += 4) { 3062 imageData.data[i + 0] = 255 3063 imageData.data[i + 1] = 0 3064 imageData.data[i + 2] = 255 3065 imageData.data[i + 3] = 255 3066 } 3067 this.context.putImageData(imageData, 10, 10) 3068 this.context.putImageData(imageData, 150, 10, 0, 0, 50, 50) 3069 }) 3070 } 3071 .width('100%') 3072 .height('100%') 3073 } 3074 } 3075 ``` 3076 3077  3078 3079 3080### setLineDash 3081 3082setLineDash(segments: number[]): void 3083 3084设置画布的虚线样式。 3085 3086**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3087 3088**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3089 3090**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3091 3092**参数：** 3093 3094| 参数名 | 类型 | 必填 | 说明 | 3095| -------- | -------- | ------- | ------------ | 3096| segments | number[] | 是 | 描述线段如何交替和线段间距长度的数组。<br>默认单位：vp。 | 3097 3098**示例：** 3099 3100 ```ts 3101 // xxx.ets 3102 @Entry 3103 @Component 3104 struct SetLineDash { 3105 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3106 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3107 3108 build() { 3109 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3110 Canvas(this.context) 3111 .width('100%') 3112 .height('100%') 3113 .backgroundColor('#ffff00') 3114 .onReady(() =>{ 3115 this.context.arc(100, 75, 50, 0, 6.28) 3116 this.context.setLineDash([10,20]) 3117 this.context.stroke() 3118 }) 3119 } 3120 .width('100%') 3121 .height('100%') 3122 } 3123 } 3124 ``` 3125 3126  3127 3128 3129### getLineDash 3130 3131getLineDash(): number[] 3132 3133获得当前画布的虚线样式。 3134 3135**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3136 3137**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3138 3139**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3140 3141**返回值：** 3142 3143| 类型 | 说明 | 3144| -------- | ------------------------ | 3145| number[] | 返回数组，该数组用来描述线段如何交替和间距长度。<br>默认单位：vp。 | 3146 3147 3148**示例：** 3149 3150 ```ts 3151 // xxx.ets 3152 @Entry 3153 @Component 3154 struct CanvasGetLineDash { 3155 @State message: string = 'Hello World' 3156 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3157 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3158 3159 build() { 3160 Row() { 3161 Column() { 3162 Text(this.message) 3163 .fontSize(50) 3164 .fontWeight(FontWeight.Bold) 3165 .onClick(()=>{ 3166 console.error('before getlinedash clicked') 3167 let res = this.context.getLineDash() 3168 console.error(JSON.stringify(res)) 3169 }) 3170 Canvas(this.context) 3171 .width('100%') 3172 .height('100%') 3173 .backgroundColor('#ffff00') 3174 .onReady(() => { 3175 this.context.arc(100, 75, 50, 0, 6.28) 3176 this.context.setLineDash([10,20]) 3177 this.context.stroke() 3178 }) 3179 } 3180 .width('100%') 3181 } 3182 .height('100%') 3183 } 3184 } 3185 ``` 3186 3187 3188 3189### transferFromImageBitmap 3190 3191transferFromImageBitmap(bitmap: ImageBitmap): void 3192 3193显示给定的ImageBitmap对象。 3194 3195**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3196 3197**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3198 3199**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3200 3201**参数：** 3202 3203| 参数名 | 类型 | 必填 | 说明 | 3204| ------ | ----------------------- | ----------------- | ------------------ | 3205| bitmap | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | 待显示的ImageBitmap对象。 | 3206 3207**示例：** 3208 3209 ```ts 3210 // xxx.ets 3211 @Entry 3212 @Component 3213 struct TransferFromImageBitmap { 3214 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3215 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3216 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 3217 3218 build() { 3219 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3220 Canvas(this.context) 3221 .width('100%') 3222 .height('100%') 3223 .backgroundColor('#ffff00') 3224 .onReady(() =>{ 3225 let imageData = this.offContext.createImageData(100, 100) 3226 for (let i = 0; i < imageData.data.length; i += 4) { 3227 imageData.data[i + 0] = 255 3228 imageData.data[i + 1] = 0 3229 imageData.data[i + 2] = 255 3230 imageData.data[i + 3] = 255 3231 } 3232 this.offContext.putImageData(imageData, 10, 10) 3233 let image = this.offContext.transferToImageBitmap() 3234 this.context.transferFromImageBitmap(image) 3235 }) 3236 } 3237 .width('100%') 3238 .height('100%') 3239 } 3240 } 3241 ``` 3242  3243 3244 3245### toDataURL 3246 3247toDataURL(type?: string, quality?: any): string 3248 3249生成一个包含图片展示的URL，该接口存在内存拷贝行为，高耗时，应避免频繁使用。 3250 3251**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3252 3253**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3254 3255**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3256 3257**参数：** 3258 3259| 参数名 | 类型 | 必填 | 说明 | 3260| ------- | ------ | ---- | ---------------------------------------- | 3261| type | string | 否 | 用于指定图像格式。<br/>可选参数为："image/png", "image/jpeg", "image/webp"。。<br>默认值：image/png。 | 3262| quality | any | 否 | 在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。<br>默认值：0.92。 | 3263 3264**返回值：** 3265 3266| 类型 | 说明 | 3267| ------ | --------- | 3268| string | 图像的URL地址。 | 3269 3270**示例：** 3271 3272 ```ts 3273 // xxx.ets 3274 @Entry 3275 @Component 3276 struct CanvasExample { 3277 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3278 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3279 @State toDataURL: string = "" 3280 3281 build() { 3282 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3283 Canvas(this.context) 3284 .width(100) 3285 .height(100) 3286 .onReady(() =>{ 3287 this.context.fillStyle = "#00ff00" 3288 this.context.fillRect(0,0,100,100) 3289 this.toDataURL = this.context.toDataURL("image/png", 0.92) 3290 }) 3291 Text(this.toDataURL) 3292 } 3293 .width('100%') 3294 .height('100%') 3295 .backgroundColor('#ffff00') 3296 } 3297 } 3298 ``` 3299  3300 3301 3302### restore 3303 3304restore(): void 3305 3306对保存的绘图上下文进行恢复。 3307 3308**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3309 3310**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3311 3312**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3313 3314**示例：** 3315 3316 ```ts 3317 // xxx.ets 3318 @Entry 3319 @Component 3320 struct CanvasExample { 3321 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3322 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3323 3324 build() { 3325 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3326 Canvas(this.context) 3327 .width('100%') 3328 .height('100%') 3329 .backgroundColor('#ffff00') 3330 .onReady(() =>{ 3331 this.context.save() // save the default state 3332 this.context.fillStyle = "#00ff00" 3333 this.context.fillRect(20, 20, 100, 100) 3334 this.context.restore() // restore to the default state 3335 this.context.fillRect(150, 75, 100, 100) 3336 }) 3337 } 3338 .width('100%') 3339 .height('100%') 3340 } 3341 } 3342 ``` 3343  3344 3345 3346### save 3347 3348save(): void 3349 3350将当前状态放入栈中，保存canvas的全部状态，通常在需要保存绘制状态时调用。 3351 3352**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3353 3354**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3355 3356**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3357 3358**示例：** 3359 3360 ```ts 3361 // xxx.ets 3362 @Entry 3363 @Component 3364 struct CanvasExample { 3365 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3366 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3367 3368 build() { 3369 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3370 Canvas(this.context) 3371 .width('100%') 3372 .height('100%') 3373 .backgroundColor('#ffff00') 3374 .onReady(() =>{ 3375 this.context.save() // save the default state 3376 this.context.fillStyle = "#00ff00" 3377 this.context.fillRect(20, 20, 100, 100) 3378 this.context.restore() // restore to the default state 3379 this.context.fillRect(150, 75, 100, 100) 3380 }) 3381 } 3382 .width('100%') 3383 .height('100%') 3384 } 3385 } 3386 ``` 3387  3388 3389 3390### createLinearGradient 3391 3392createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient 3393 3394创建一个线性渐变色。 3395 3396**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3397 3398**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3399 3400**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3401 3402**参数：** 3403 3404| 参数名 | 类型 | 必填 | 说明 | 3405| ---- | ------ | ---- | -------- | 3406| x0 | number | 是 | 起点的x轴坐标。<br>默认单位：vp。 | 3407| y0 | number | 是 | 起点的y轴坐标。<br>默认单位：vp。 | 3408| x1 | number | 是 | 终点的x轴坐标。<br>默认单位：vp。 | 3409| y1 | number | 是 | 终点的y轴坐标。<br>默认单位：vp。 | 3410 3411**返回值：** 3412 3413| 类型 | 说明 | 3414| ------ | --------- | 3415| [CanvasGradient](ts-components-canvas-canvasgradient.md) | 新的CanvasGradient对象，用于在canvas上创建渐变效果。 | 3416 3417**示例：** 3418 3419 ```ts 3420 // xxx.ets 3421 @Entry 3422 @Component 3423 struct CreateLinearGradient { 3424 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3425 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3426 3427 build() { 3428 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3429 Canvas(this.context) 3430 .width('100%') 3431 .height('100%') 3432 .backgroundColor('#ffff00') 3433 .onReady(() =>{ 3434 let grad = this.context.createLinearGradient(50,0, 300,100) 3435 grad.addColorStop(0.0, '#ff0000') 3436 grad.addColorStop(0.5, '#ffffff') 3437 grad.addColorStop(1.0, '#00ff00') 3438 this.context.fillStyle = grad 3439 this.context.fillRect(0, 0, 400, 400) 3440 }) 3441 } 3442 .width('100%') 3443 .height('100%') 3444 } 3445 } 3446 ``` 3447 3448  3449 3450 3451### createRadialGradient 3452 3453createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient 3454 3455创建一个径向渐变色。 3456 3457**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3458 3459**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3460 3461**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3462 3463**参数：** 3464 3465| 参数名 | 类型 | 必填 | 说明 | 3466| ---- | ------ | ---- | ----------------- | 3467| x0 | number | 是 | 起始圆的x轴坐标。<br>默认单位：vp。 | 3468| y0 | number | 是 | 起始圆的y轴坐标。<br>默认单位：vp。 | 3469| r0 | number | 是 | 起始圆的半径。必须是非负且有限的。<br>默认单位：vp。 | 3470| x1 | number | 是 | 终点圆的x轴坐标。<br>默认单位：vp。 | 3471| y1 | number | 是 | 终点圆的y轴坐标。<br>默认单位：vp。 | 3472| r1 | number | 是 | 终点圆的半径。必须为非负且有限的。<br>默认单位：vp。 | 3473 3474**返回值：** 3475 3476| 类型 | 说明 | 3477| ------ | --------- | 3478| [CanvasGradient](ts-components-canvas-canvasgradient.md) | 新的CanvasGradient对象，用于在canvas上创建渐变效果。 | 3479 3480**示例：** 3481 3482 ```ts 3483 // xxx.ets 3484 @Entry 3485 @Component 3486 struct CreateRadialGradient { 3487 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3488 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3489 3490 build() { 3491 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3492 Canvas(this.context) 3493 .width('100%') 3494 .height('100%') 3495 .backgroundColor('#ffff00') 3496 .onReady(() =>{ 3497 let grad = this.context.createRadialGradient(200,200,50, 200,200,200) 3498 grad.addColorStop(0.0, '#ff0000') 3499 grad.addColorStop(0.5, '#ffffff') 3500 grad.addColorStop(1.0, '#00ff00') 3501 this.context.fillStyle = grad 3502 this.context.fillRect(0, 0, 440, 440) 3503 }) 3504 } 3505 .width('100%') 3506 .height('100%') 3507 } 3508 } 3509 ``` 3510 3511  3512 3513### createConicGradient<sup>10+</sup> 3514 3515createConicGradient(startAngle: number, x: number, y: number): CanvasGradient 3516 3517创建一个圆锥渐变色。 3518 3519**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3520 3521**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3522 3523**参数：** 3524 3525| 参数名 | 类型 | 必填 | 说明 | 3526| ---------- | ------ | ---- | ----------------------------------- | 3527| startAngle | number | 是 | 开始渐变的角度。角度测量从中心右侧水平开始，顺时针移动。<br>单位：弧度。 | 3528| x | number | 是 | 圆锥渐变的中心x轴坐标。<br>默认单位：vp。 | 3529| y | number | 是 | 圆锥渐变的中心y轴坐标。<br>默认单位：vp。 | 3530 3531**返回值：** 3532 3533| 类型 | 说明 | 3534| ------ | --------- | 3535| [CanvasGradient](ts-components-canvas-canvasgradient.md) | 新的CanvasGradient对象，用于在canvas上创建渐变效果。 | 3536 3537**示例：** 3538 3539```ts 3540// xxx.ets 3541@Entry 3542@Component 3543struct CanvasExample { 3544 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3545 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3546 3547 build() { 3548 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3549 Canvas(this.context) 3550 .width('100%') 3551 .height('100%') 3552 .backgroundColor('#ffffff') 3553 .onReady(() => { 3554 let grad = this.context.createConicGradient(0, 50, 80) 3555 grad.addColorStop(0.0, '#ff0000') 3556 grad.addColorStop(0.5, '#ffffff') 3557 grad.addColorStop(1.0, '#00ff00') 3558 this.context.fillStyle = grad 3559 this.context.fillRect(0, 30, 100, 100) 3560 }) 3561 } 3562 .width('100%') 3563 .height('100%') 3564 } 3565} 3566``` 3567 3568  3569 3570### on('onAttach')<sup>13+</sup> 3571 3572on(type: 'onAttach', callback: () => void): void 3573 3574订阅CanvasRenderingContext2D与Canvas组件发生绑定的场景。 3575 3576**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 3577 3578**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3579 3580**参数：** 3581 3582| 参数名 | 类型 | 必填 | 说明 | 3583| ------ | --------- | ---- | ---------------------------------------------------------------------- | 3584| type | string | 是 | 订阅CanvasRenderingContext2D与Canvas组件发生绑定的回调 | 3585| callback | () => void | 是 | 订阅CanvasRenderingContext2D与Canvas组件发生绑定后触发的回调 | 3586 3587> **说明：** 3588> 3589> CanvasRenderingContext2D对象在同一时间只能与一个Canvas组件绑定。</br> 3590> 当CanvasRenderingContext2D对象和Canvas组件发生绑定时，会触发'onAttach'回调，表示可以获取到[canvas](#canvas13)。</br> 3591> 避免在'onAttach'中执行绘制方法，应保证Canvas组件已经'[onReady](ts-components-canvas-canvas.md#事件)'再进行绘制。</br> 3592> 触发'onAttach'回调的一般场景：</br> 3593> 1、Canvas组件创建时绑定CanvasRenderingContext2D对象;</br> 3594> 2、CanvasRenderingContext2D对象新绑定一个Canvas组件时。</br> 3595 3596 3597### on('onDetach')<sup>13+</sup> 3598 3599on(type: 'onDetach', callback: () => void): void 3600 3601订阅CanvasRenderingContext2D与Canvas组件解除绑定的场景。 3602 3603**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 3604 3605**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3606 3607**参数：** 3608 3609| 参数名 | 类型 | 必填 | 说明 | 3610| ------ | --------- | ---- | ---------------------------------------------------------------------- | 3611| type | string | 是 | 订阅CanvasRenderingContext2D与Canvas组件解除绑定的回调 | 3612| callback | () => void | 是 | 订阅CanvasRenderingContext2D与Canvas组件解除绑定后触发的回调 | 3613 3614> **说明：** 3615> 3616> 当CanvasRenderingContext2D对象和Canvas组件解除绑定时，会触发'onDetach'回调，表示应停止绘制行为。</br> 3617> 触发'onDetach'回调的一般场景：</br> 3618> 1、Canvas组件销毁时解除绑定CanvasRenderingContext2D对象;</br> 3619> 2、CanvasRenderingContext2D对象新绑定一个Canvas组件，会先解除已有的绑定。</br> 3620 3621### off('onAttach')<sup>13+</sup> 3622 3623off(type: 'onAttach', callback?: () => void): void 3624 3625取消订阅CanvasRenderingContext2D与Canvas组件发生绑定的场景。 3626 3627**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 3628 3629**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3630 3631**参数：** 3632 3633| 参数名 | 类型 | 必填 | 说明 | 3634| ------ | --------- | ---- | ---------------------------------------------------------------------- | 3635| type | string | 是 | 取消订阅CanvasRenderingContext2D与Canvas组件发生绑定的回调 | 3636| callback | () => void | 否 | 为空代表取消所有订阅CanvasRenderingContext2D与Canvas组件发生绑定后触发的回调。<br>非空代表取消订阅发生绑定对应的回调。 | 3637 3638### off('onDetach')<sup>13+</sup> 3639 3640off(type: 'onDetach', callback?: () => void): void 3641 3642取消订阅CanvasRenderingContext2D与Canvas组件解除绑定的场景。 3643 3644**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 3645 3646**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3647 3648**参数：** 3649 3650| 参数名 | 类型 | 必填 | 说明 | 3651| ------ | --------- | ---- | ---------------------------------------------------------------------- | 3652| type | string | 是 | 取消订阅CanvasRenderingContext2D与Canvas组件解除绑定的回调 | 3653| callback | () => void | 否 | 为空代表取消所有订阅CanvasRenderingContext2D与Canvas组件解除绑定后触发的回调。<br>非空代表取消订阅接触绑定对应的回调。 | 3654 3655**示例：** 3656 3657```ts 3658import { FrameNode } from '@kit.ArkUI' 3659// xxx.ets 3660@Entry 3661@Component 3662struct AttachDetachExample { 3663 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3664 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3665 private scroller: Scroller = new Scroller() 3666 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] 3667 private node: FrameNode | null = null 3668 3669 attachCallback(): void { 3670 console.info('CanvasRenderingContext2D attached to the canvas frame node.') 3671 this.node = this.context.canvas 3672 } 3673 detachCallback(): void { 3674 console.info('CanvasRenderingContext2D detach from the canvas frame node.') 3675 this.node = null 3676 } 3677 aboutToAppear(): void { 3678 this.context.on('onAttach', this.attachCallback.bind(this)) 3679 this.context.on('onDetach', this.detachCallback.bind(this)) 3680 } 3681 aboutToDisappear(): void { 3682 this.context.off('onAttach', this.attachCallback) 3683 this.context.off('onDetach', this.detachCallback) 3684 } 3685 3686 build() { 3687 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3688 Scroll(this.scroller) { 3689 Flex({ direction: FlexDirection.Column}) { 3690 ForEach(this.arr, (item: number) => { 3691 Row() { 3692 if (item == 3) { 3693 Canvas(this.context) 3694 .width('100%') 3695 .height(150) 3696 .backgroundColor('#ffff00') 3697 .onReady(() => { 3698 this.context.font = '30vp sans-serif' 3699 this.node?.commonEvent.setOnVisibleAreaApproximateChange( 3700 { ratios: [0, 1], expectedUpdateInterval: 10}, 3701 (isVisible: boolean, currentRatio: number) => { 3702 if (!isVisible && currentRatio <= 0.0) { 3703 console.info('Canvas is completely invisible.') 3704 } 3705 if (isVisible && currentRatio >= 1.0) { 3706 console.info('Canvas is fully visible.') 3707 } 3708 } 3709 ) 3710 }) 3711 } else { 3712 Text(item.toString()) 3713 .width('100%') 3714 .height(150) 3715 .backgroundColor(Color.Blue) 3716 .borderRadius(15) 3717 .fontSize(16) 3718 .textAlign(TextAlign.Center) 3719 .margin({ top: 5 }) 3720 } 3721 } 3722 }, (item: number) => item.toString()) 3723 } 3724 } 3725 .width('90%') 3726 .scrollBar(BarState.Off) 3727 .scrollable(ScrollDirection.Vertical) 3728 } 3729 .width('100%') 3730 .height('100%') 3731 } 3732} 3733``` 3734 3735### startImageAnalyzer<sup>12+</sup> 3736 3737startImageAnalyzer(config: ImageAnalyzerConfig): Promise\<void> 3738 3739配置AI分析并启动AI分析功能，使用前需先[使能](ts-components-canvas-canvas.md#enableanalyzer12)图像AI分析能力。<br>该方法调用时，将截取调用时刻的画面帧进行分析，使用时需注意启动分析的时机，避免出现画面和分析内容不一致的情况。<br>未执行完重复调用该方法会触发错误回调。示例代码同stopImageAnalyzer。 3740 3741> **说明：** 3742> 3743> 分析类型不支持动态修改。 3744> 当检测到画面有变化时，分析结果将自动销毁，可重新调用本接口启动分析。 3745> 该特性依赖设备能力，不支持该能力的情况下，将返回错误码。 3746 3747**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3748 3749**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3750 3751**参数：** 3752 3753| 参数名 | 类型 | 必填 | 说明 | 3754| ------ | --------- | ---- | ---------------------------------------------------------------------- | 3755| config | [ImageAnalyzerConfig](ts-image-common.md#imageanalyzerconfig) | 是 | 执行AI分析所需要的入参，用于配置AI分析功能。 | 3756 3757**返回值：** 3758 3759| 类型 | 说明 | 3760| ----------------- | ------------------------------------ | 3761| Promise\<void> | Promise对象，用于获取AI分析是否成功执行。 | 3762 3763**错误码：** 3764 3765以下错误码的详细介绍请参见[AI分析类库错误码](../errorcode-image-analyzer.md)。 3766 3767| 错误码ID | 错误信息 | 3768| -------- | -------------------------------------------- | 3769| 110001 | AI analysis is unsupported. | 3770| 110002 | AI analysis is ongoing. | 3771 3772### stopImageAnalyzer<sup>12+</sup> 3773 3774stopImageAnalyzer(): void 3775 3776停止AI分析功能，AI分析展示的内容将被销毁。 3777 3778> **说明：** 3779> 3780> 在startImageAnalyzer方法未返回结果时调用本方法，会触发其错误回调。 3781> 该特性依赖设备能力。 3782 3783**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3784 3785**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3786 3787**示例：** 3788 3789```ts 3790// xxx.ets 3791import { BusinessError } from '@kit.BasicServicesKit'; 3792 3793@Entry 3794@Component 3795struct ImageAnalyzerExample { 3796 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3797 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3798 private config: ImageAnalyzerConfig = { 3799 types: [ImageAnalyzerType.SUBJECT, ImageAnalyzerType.TEXT] 3800 } 3801 private img = new ImageBitmap('page/common/test.jpg') 3802 private aiController: ImageAnalyzerController = new ImageAnalyzerController() 3803 private options: ImageAIOptions = { 3804 types: [ImageAnalyzerType.SUBJECT, ImageAnalyzerType.TEXT], 3805 aiController: this.aiController 3806 } 3807 3808 build() { 3809 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3810 Button('start') 3811 .width(80) 3812 .height(80) 3813 .onClick(() => { 3814 this.context.startImageAnalyzer(this.config) 3815 .then(() => { 3816 console.log("analysis complete") 3817 }) 3818 .catch((error: BusinessError) => { 3819 console.log("error code: " + error.code) 3820 }) 3821 }) 3822 Button('stop') 3823 .width(80) 3824 .height(80) 3825 .onClick(() => { 3826 this.context.stopImageAnalyzer() 3827 }) 3828 Button('getTypes') 3829 .width(80) 3830 .height(80) 3831 .onClick(() => { 3832 this.aiController.getImageAnalyzerSupportTypes() 3833 }) 3834 Canvas(this.context, this.options) 3835 .width(200) 3836 .height(200) 3837 .enableAnalyzer(true) 3838 .onReady(() => { 3839 this.context.drawImage(this.img, 0, 0, 200, 200) 3840 }) 3841 } 3842 .width('100%') 3843 .height('100%') 3844 } 3845} 3846``` 3847 3848## CanvasDirection 3849 3850**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3851 3852**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3853 3854**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3855 3856| 类型 | 说明 | 3857| ------- | ------------------- | 3858| inherit | 继承canvas组件通用属性已设定的文本方向。 | 3859| ltr | 从左往右。 | 3860| rtl | 从右往左。 | 3861 3862## CanvasFillRule 3863 3864**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3865 3866**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3867 3868**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3869 3870| 类型 | 说明 | 3871| ------- | ----- | 3872| evenodd | 奇偶规则。 | 3873| nonzero | 非零规则。 | 3874 3875## CanvasLineCap 3876 3877**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3878 3879**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3880 3881**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3882 3883| 类型 | 说明 | 3884| ------ | ----------------------------- | 3885| butt | 线条两端为平行线，不额外扩展。 | 3886| round | 在线条两端延伸半个圆，直径等于线宽。 | 3887| square | 在线条两端延伸一个矩形，宽度等于线宽的一半，高度等于线宽。 | 3888 3889## CanvasLineJoin 3890 3891**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3892 3893**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3894 3895**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3896 3897| 类型 | 说明 | 3898| ----- | ---------------------------------------- | 3899| bevel | 在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。 | 3900| miter | 在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。 | 3901| round | 在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。 | 3902 3903## CanvasTextAlign 3904 3905**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3906 3907**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3908 3909**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3910 3911| 类型 | 说明 | 3912| ------ | ------------ | 3913| center | 文本居中对齐。 | 3914| start | 文本对齐界线开始的地方。 | 3915| end | 文本对齐界线结束的地方。 | 3916| left | 文本左对齐。 | 3917| right | 文本右对齐。 | 3918 3919## CanvasTextBaseline 3920 3921**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3922 3923**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3924 3925**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3926 3927| 类型 | 说明 | 3928| ----------- | ---------------------------------------- | 3929| alphabetic | 文本基线是标准的字母基线。 | 3930| bottom | 文本基线在文本块的底部。 与ideographic基线的区别在于ideographic基线不需要考虑下行字母。 | 3931| hanging | 文本基线是悬挂基线。 | 3932| ideographic | 文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。 | 3933| middle | 文本基线在文本块的中间。 | 3934| top | 文本基线在文本块的顶部。 | 3935 3936## ImageSmoothingQuality 3937 3938**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3939 3940**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3941 3942**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3943 3944| 类型 | 说明 | 3945| ------ | ---- | 3946| low | 低画质 | 3947| medium | 中画质 | 3948| high | 高画质 | 3949 3950## TextMetrics 3951 3952**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3953 3954**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3955 3956**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3957 3958| 名称 | 类型 | 只读 | 可选 | 说明 | 3959| ---------- | -------------- | ------ | ---------------- | ------------------------ | 3960| width | number | 是 | 否 | 只读属性，文本方块的宽度。 | 3961| height | number | 是 | 否 | 只读属性，文本方块的高度。 | 3962| actualBoundingBoxAscent | number | 是 | 否 | 只读属性，从[CanvasRenderingContext2D.textBaseline](#canvastextbaseline)属性标明的水平线到渲染文本的矩形边界顶部的距离。 | 3963| actualBoundingBoxDescent | number | 是 | 否 | 只读属性，从[CanvasRenderingContext2D.textBaseline](#canvastextbaseline)属性标明的水平线到渲染文本的矩形边界底部的距离。 | 3964| actualBoundingBoxLeft | number | 是 | 否 | 只读属性，平行于基线，从[CanvasRenderingContext2D.textAlign](#canvastextalign)属性确定的对齐点到文本矩形边界左侧的距离。 | 3965| actualBoundingBoxRight | number | 是 | 否 | 只读属性，平行于基线，从[CanvasRenderingContext2D.textAlign](#canvastextalign)属性确定的对齐点到文本矩形边界右侧的距离。 | 3966| alphabeticBaseline | number | 是 | 否 | 只读属性，从[CanvasRenderingContext2D.textBaseline](#canvastextbaseline)属性标明的水平线到线框的 alphabetic 基线的距离。 | 3967| emHeightAscent | number | 是 | 否 | 只读属性，从[CanvasRenderingContext2D.textBaseline](#canvastextbaseline)属性标明的水平线到线框中 em 方块顶部的距离。 | 3968| emHeightDescent | number | 是 | 否 | 只读属性，从[CanvasRenderingContext2D.textBaseline](#canvastextbaseline)属性标明的水平线到线框中 em 方块底部的距离。 | 3969| fontBoundingBoxAscent | number | 是 | 否 | 只读属性，从[CanvasRenderingContext2D.textBaseline](#canvastextbaseline)属性标明的水平线到渲染文本的所有字体的矩形最高边界顶部的距离。 | 3970| fontBoundingBoxDescent | number | 是 | 否 | 只读属性，从[CanvasRenderingContext2D.textBaseline](#canvastextbaseline)属性标明的水平线到渲染文本的所有字体的矩形边界最底部的距离。 | 3971| hangingBaseline | number | 是 | 否 | 只读属性，从[CanvasRenderingContext2D.textBaseline](#canvastextbaseline)属性标明的水平线到线框的 hanging 基线的距离。 | 3972| ideographicBaseline | number | 是 | 否 | 只读属性，从[CanvasRenderingContext2D.textBaseline](#canvastextbaseline)属性标明的水平线到线框的 ideographic 基线的距离。 |
