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/>默认值：'black'<br/>- 类型为number时，表示设置填充区域的颜色。<br/>默认值：'#000000'<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/>默认值：'black'<br/>- 类型为number时，表示设置线条使用的颜色。<br/>默认值：'#000000'<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 1315stroke(path: Path2D): void 1316 1317根据指定的路径，进行边框绘制操作。 1318 1319**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1320 1321**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1322 1323**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1324 1325**参数：** 1326 1327| 参数名 | 类型 | 必填 | 说明 | 1328| ---- | ---------------------------------------- | ---- | ------------ | 1329| path | [Path2D](ts-components-canvas-path2d.md) | 是 | 需要绘制的Path2D。 | 1330 1331 **示例：** 1332 1333 ```ts 1334 // xxx.ets 1335 @Entry 1336 @Component 1337 struct Stroke { 1338 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1339 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1340 private path2Da: Path2D = new Path2D() 1341 1342 build() { 1343 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1344 Canvas(this.context) 1345 .width('100%') 1346 .height('100%') 1347 .backgroundColor('#ffff00') 1348 .onReady(() => { 1349 this.path2Da.moveTo(25, 25) 1350 this.path2Da.lineTo(25, 105) 1351 this.path2Da.lineTo(75, 105) 1352 this.path2Da.lineTo(75, 25) 1353 this.context.strokeStyle = 'rgb(0,0,255)' 1354 this.context.stroke(this.path2Da) 1355 }) 1356 } 1357 .width('100%') 1358 .height('100%') 1359 } 1360 } 1361 ``` 1362 1363  1364 1365### beginPath 1366 1367beginPath(): void 1368 1369创建一个新的绘制路径。 1370 1371**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1372 1373**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1374 1375**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1376 1377**示例：** 1378 1379 ```ts 1380 // xxx.ets 1381 @Entry 1382 @Component 1383 struct BeginPath { 1384 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1385 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1386 1387 build() { 1388 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1389 Canvas(this.context) 1390 .width('100%') 1391 .height('100%') 1392 .backgroundColor('#ffff00') 1393 .onReady(() =>{ 1394 this.context.beginPath() 1395 this.context.lineWidth = 6 1396 this.context.strokeStyle = '#0000ff' 1397 this.context.moveTo(15, 80) 1398 this.context.lineTo(280, 160) 1399 this.context.stroke() 1400 }) 1401 } 1402 .width('100%') 1403 .height('100%') 1404 } 1405 } 1406 ``` 1407 1408  1409 1410 1411### moveTo 1412 1413moveTo(x: number, y: number): void 1414 1415路径从当前点移动到指定点。 1416 1417**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1418 1419**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1420 1421**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1422 1423**参数：** 1424 1425| 参数名 | 类型 | 必填 | 说明 | 1426| ---- | ------ | ---- | --------- | 1427| x | number | 是 | 指定位置的x坐标。<br>默认单位：vp。 | 1428| y | number | 是 | 指定位置的y坐标。<br>默认单位：vp。 | 1429 1430**示例：** 1431 1432 ```ts 1433 // xxx.ets 1434 @Entry 1435 @Component 1436 struct MoveTo { 1437 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1438 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1439 1440 build() { 1441 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1442 Canvas(this.context) 1443 .width('100%') 1444 .height('100%') 1445 .backgroundColor('#ffff00') 1446 .onReady(() =>{ 1447 this.context.beginPath() 1448 this.context.moveTo(10, 10) 1449 this.context.lineTo(280, 160) 1450 this.context.stroke() 1451 }) 1452 } 1453 .width('100%') 1454 .height('100%') 1455 } 1456 } 1457 ``` 1458 1459  1460 1461 1462### lineTo 1463 1464lineTo(x: number, y: number): void 1465 1466从当前点到指定点进行路径连接。 1467 1468**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1469 1470**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1471 1472**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1473 1474**参数：** 1475 1476| 参数名 | 类型 | 必填 | 说明 | 1477| ---- | ------ | ---- | --------- | 1478| x | number | 是 | 指定位置的x坐标。<br>默认单位：vp。 | 1479| y | number | 是 | 指定位置的y坐标。<br>默认单位：vp。 | 1480 1481**示例：** 1482 1483 ```ts 1484 // xxx.ets 1485 @Entry 1486 @Component 1487 struct LineTo { 1488 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1489 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1490 1491 build() { 1492 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1493 Canvas(this.context) 1494 .width('100%') 1495 .height('100%') 1496 .backgroundColor('#ffff00') 1497 .onReady(() =>{ 1498 this.context.beginPath() 1499 this.context.moveTo(10, 10) 1500 this.context.lineTo(280, 160) 1501 this.context.stroke() 1502 }) 1503 } 1504 .width('100%') 1505 .height('100%') 1506 } 1507 } 1508 ``` 1509 1510  1511 1512 1513### closePath 1514 1515closePath(): void 1516 1517结束当前路径形成一个封闭路径。 1518 1519**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1520 1521**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1522 1523**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1524 1525**示例：** 1526 1527 ```ts 1528 // xxx.ets 1529 @Entry 1530 @Component 1531 struct ClosePath { 1532 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1533 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1534 1535 build() { 1536 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1537 Canvas(this.context) 1538 .width('100%') 1539 .height('100%') 1540 .backgroundColor('#ffff00') 1541 .onReady(() =>{ 1542 this.context.beginPath() 1543 this.context.moveTo(30, 30) 1544 this.context.lineTo(110, 30) 1545 this.context.lineTo(70, 90) 1546 this.context.closePath() 1547 this.context.stroke() 1548 }) 1549 } 1550 .width('100%') 1551 .height('100%') 1552 } 1553 } 1554 ``` 1555 1556  1557 1558 1559### createPattern 1560 1561createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | null 1562 1563通过指定图像和重复方式创建图片填充的模板。 1564 1565**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1566 1567**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1568 1569**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1570 1571**参数：** 1572 1573| 参数名 | 类型 | 必填 | 说明 | 1574| ---------- | ---------- | ---- | ---------------------------------------- | 1575| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | 图源对象，具体参考ImageBitmap对象。 | 1576| repetition | string \| null | 是 | 设置图像重复的方式：<br>'repeat'：沿x轴和y轴重复绘制图像；<br>'repeat-x'：沿x轴重复绘制图像；<br>'repeat-y'：沿y轴重复绘制图像；<br>'no-repeat'：不重复绘制图像；<br>'clamp'：在原始边界外绘制时，超出部分使用边缘的颜色绘制；<br>'mirror'：沿x轴和y轴重复翻转绘制图像。 | 1577 1578**返回值：** 1579 1580| 类型 | 说明 | 1581| ---------------------------------------- | ----------------------- | 1582| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) \| null | 通过指定图像和重复方式创建图片填充的模板对象。 | 1583 1584**示例：** 1585 1586 ```ts 1587 // xxx.ets 1588 @Entry 1589 @Component 1590 struct CreatePattern { 1591 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1592 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1593 private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") 1594 1595 build() { 1596 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1597 Canvas(this.context) 1598 .width('100%') 1599 .height('100%') 1600 .backgroundColor('#ffff00') 1601 .onReady(() =>{ 1602 let pattern = this.context.createPattern(this.img, 'repeat') 1603 if (pattern) { 1604 this.context.fillStyle = pattern 1605 } 1606 this.context.fillRect(0, 0, 200, 200) 1607 }) 1608 } 1609 .width('100%') 1610 .height('100%') 1611 } 1612 } 1613 ``` 1614 1615  1616 1617 1618### bezierCurveTo 1619 1620bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void 1621 1622创建三次贝赛尔曲线的路径。 1623 1624**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1625 1626**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1627 1628**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1629 1630**参数：** 1631 1632| 参数名 | 类型 | 必填 | 说明 | 1633| ---- | ------ | ---- | -------------- | 1634| cp1x | number | 是 | 第一个贝塞尔参数的x坐标值。<br>默认单位：vp。 | 1635| cp1y | number | 是 | 第一个贝塞尔参数的y坐标值。<br>默认单位：vp。 | 1636| cp2x | number | 是 | 第二个贝塞尔参数的x坐标值。<br>默认单位：vp。 | 1637| cp2y | number | 是 | 第二个贝塞尔参数的y坐标值。<br>默认单位：vp。 | 1638| x | number | 是 | 路径结束时的x坐标值。<br>默认单位：vp。 | 1639| y | number | 是 | 路径结束时的y坐标值。<br>默认单位：vp。 | 1640 1641**示例：** 1642 1643 ```ts 1644 // xxx.ets 1645 @Entry 1646 @Component 1647 struct BezierCurveTo { 1648 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1649 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1650 1651 build() { 1652 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1653 Canvas(this.context) 1654 .width('100%') 1655 .height('100%') 1656 .backgroundColor('#ffff00') 1657 .onReady(() =>{ 1658 this.context.beginPath() 1659 this.context.moveTo(10, 10) 1660 this.context.bezierCurveTo(20, 100, 200, 100, 200, 20) 1661 this.context.stroke() 1662 }) 1663 } 1664 .width('100%') 1665 .height('100%') 1666 } 1667 } 1668 ``` 1669 1670  1671 1672 1673### quadraticCurveTo 1674 1675quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void 1676 1677创建二次贝赛尔曲线的路径。 1678 1679**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1680 1681**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1682 1683**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1684 1685**参数：** 1686 1687| 参数名 | 类型 | 必填 | 说明 | 1688| ---- | ------ | ---- | ----------- | 1689| cpx | number | 是 | 贝塞尔参数的x坐标值。<br>默认单位：vp。 | 1690| cpy | number | 是 | 贝塞尔参数的y坐标值。<br>默认单位：vp。 | 1691| x | number | 是 | 路径结束时的x坐标值。<br>默认单位：vp。 | 1692| y | number | 是 | 路径结束时的y坐标值。<br>默认单位：vp。 | 1693 1694**示例：** 1695 1696 ```ts 1697 // xxx.ets 1698 @Entry 1699 @Component 1700 struct QuadraticCurveTo { 1701 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1702 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1703 1704 build() { 1705 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1706 Canvas(this.context) 1707 .width('100%') 1708 .height('100%') 1709 .backgroundColor('#ffff00') 1710 .onReady(() =>{ 1711 this.context.beginPath() 1712 this.context.moveTo(20, 20) 1713 this.context.quadraticCurveTo(100, 100, 200, 20) 1714 this.context.stroke() 1715 }) 1716 } 1717 .width('100%') 1718 .height('100%') 1719 } 1720 } 1721 ``` 1722 1723  1724 1725 1726### arc 1727 1728arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void 1729 1730绘制弧线路径。 1731 1732**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1733 1734**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1735 1736**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1737 1738**参数：** 1739 1740| 参数名 | 类型 | 必填 | 说明 | 1741| ---------------- | ------- | ---- | ---------- | 1742| x | number | 是 | 弧线圆心的x坐标值。<br>默认单位：vp。 | 1743| y | number | 是 | 弧线圆心的y坐标值。<br>默认单位：vp。 | 1744| radius | number | 是 | 弧线的圆半径。<br>默认单位：vp。 | 1745| startAngle | number | 是 | 弧线的起始弧度。<br>单位：弧度 | 1746| endAngle | number | 是 | 弧线的终止弧度。<br>单位：弧度 | 1747| counterclockwise | boolean | 否 | 是否逆时针绘制圆弧。<br>true:逆时针方向绘制椭圆。<br>false:顺时针方向绘制椭圆。<br>默认值：false。 | 1748 1749**示例：** 1750 1751 ```ts 1752 // xxx.ets 1753 @Entry 1754 @Component 1755 struct Arc { 1756 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1757 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1758 1759 build() { 1760 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1761 Canvas(this.context) 1762 .width('100%') 1763 .height('100%') 1764 .backgroundColor('#ffff00') 1765 .onReady(() =>{ 1766 this.context.beginPath() 1767 this.context.arc(100, 75, 50, 0, 6.28) 1768 this.context.stroke() 1769 }) 1770 } 1771 .width('100%') 1772 .height('100%') 1773 } 1774 } 1775 ``` 1776 1777  1778 1779 1780### arcTo 1781 1782arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void 1783 1784依据给定的控制点和圆弧半径创建圆弧路径。 1785 1786**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1787 1788**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1789 1790**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1791 1792**参数：** 1793 1794| 参数名 | 类型 | 必填 | 说明 | 1795| ------ | ------ | ---- | --------------- | 1796| x1 | number | 是 | 第一个控制点的x坐标值。<br>默认单位：vp。 | 1797| y1 | number | 是 | 第一个控制点的y坐标值。<br>默认单位：vp。 | 1798| x2 | number | 是 | 第二个控制点的x坐标值。<br>默认单位：vp。 | 1799| y2 | number | 是 | 第二个控制点的y坐标值。<br>默认单位：vp。 | 1800| radius | number | 是 | 圆弧的圆半径值。<br>默认单位：vp。 | 1801 1802**示例：** 1803 1804 ```ts 1805 // xxx.ets 1806 @Entry 1807 @Component 1808 struct ArcTo { 1809 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1810 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1811 1812 build() { 1813 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1814 Canvas(this.context) 1815 .width('100%') 1816 .height('100%') 1817 .backgroundColor('#ffff00') 1818 .onReady(() =>{ 1819 // 切线 1820 this.context.beginPath() 1821 this.context.strokeStyle = '#808080' 1822 this.context.lineWidth = 1.5; 1823 this.context.moveTo(360, 20); 1824 this.context.lineTo(360, 170); 1825 this.context.lineTo(110, 170); 1826 this.context.stroke(); 1827 1828 // 圆弧 1829 this.context.beginPath() 1830 this.context.strokeStyle = '#000000' 1831 this.context.lineWidth = 3; 1832 this.context.moveTo(360, 20) 1833 this.context.arcTo(360, 170, 110, 170, 150) 1834 this.context.stroke() 1835 1836 // 起始点 1837 this.context.beginPath(); 1838 this.context.fillStyle = '#00ff00'; 1839 this.context.arc(360, 20, 4, 0, 2 * Math.PI); 1840 this.context.fill(); 1841 1842 // 控制点 1843 this.context.beginPath(); 1844 this.context.fillStyle = '#ff0000'; 1845 this.context.arc(360, 170, 4, 0, 2 * Math.PI); 1846 this.context.arc(110, 170, 4, 0, 2 * Math.PI); 1847 this.context.fill(); 1848 }) 1849 } 1850 .width('100%') 1851 .height('100%') 1852 } 1853 } 1854 ``` 1855 1856  1857 1858 > 此示例中，arcTo()创建的圆弧为黑色，圆弧的两条切线为灰色。控制点为红色，起始点为绿色。 1859 > 1860 > 可以想象两条切线：一条切线从起始点到第一个控制点，另一条切线从第一个控制点到第二个控制点。arcTo()在这两条切线间创建一个圆弧，并使圆弧与这两条切线都相切。 1861 1862 1863### ellipse 1864 1865ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void 1866 1867在规定的矩形区域绘制一个椭圆。 1868 1869**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1870 1871**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1872 1873**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1874 1875**参数：** 1876 1877| 参数名 | 类型 | 必填 | 说明 | 1878| ---------------- | ------- | ---- | ---------------------------------------- | 1879| x | number | 是 | 椭圆圆心的x轴坐标。<br>默认单位：vp。 | 1880| y | number | 是 | 椭圆圆心的y轴坐标。<br>默认单位：vp。 | 1881| radiusX | number | 是 | 椭圆x轴的半径长度。<br>默认单位：vp。 | 1882| radiusY | number | 是 | 椭圆y轴的半径长度。<br>默认单位：vp。 | 1883| rotation | number | 是 | 椭圆的旋转角度。<br>单位：弧度。 | 1884| startAngle | number | 是 | 椭圆绘制的起始点角度。<br>单位：弧度。 | 1885| endAngle | number | 是 | 椭圆绘制的结束点角度。<br>单位：弧度。 | 1886| counterclockwise | boolean | 否 | 是否以逆时针方向绘制椭圆。<br>true:逆时针方向绘制椭圆。<br>false:顺时针方向绘制椭圆。<br>默认值：false。 | 1887 1888**示例：** 1889 1890 ```ts 1891 // xxx.ets 1892 @Entry 1893 @Component 1894 struct CanvasExample { 1895 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1896 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1897 1898 build() { 1899 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1900 Canvas(this.context) 1901 .width('100%') 1902 .height('100%') 1903 .backgroundColor('#ffff00') 1904 .onReady(() =>{ 1905 this.context.beginPath() 1906 this.context.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI * 2, false) 1907 this.context.stroke() 1908 this.context.beginPath() 1909 this.context.ellipse(200, 300, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI * 2, true) 1910 this.context.stroke() 1911 }) 1912 } 1913 .width('100%') 1914 .height('100%') 1915 } 1916 } 1917 ``` 1918 1919  1920 1921 1922### rect 1923 1924rect(x: number, y: number, w: number, h: number): void 1925 1926创建矩形路径。 1927 1928**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1929 1930**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1931 1932**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1933 1934**参数：** 1935 1936| 参数名 | 类型 | 必填 | 说明 | 1937| ---- | ------ | ---- | ------------- | 1938| x | number | 是 | 指定矩形的左上角x坐标值。<br>默认单位：vp。 | 1939| y | number | 是 | 指定矩形的左上角y坐标值。<br>默认单位：vp。 | 1940| w | number | 是 | 指定矩形的宽度。<br>默认单位：vp。 | 1941| h | number | 是 | 指定矩形的高度。<br>默认单位：vp。 | 1942 1943**示例：** 1944 1945 ```ts 1946 // xxx.ets 1947 @Entry 1948 @Component 1949 struct CanvasExample { 1950 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1951 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1952 1953 build() { 1954 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1955 Canvas(this.context) 1956 .width('100%') 1957 .height('100%') 1958 .backgroundColor('#ffff00') 1959 .onReady(() =>{ 1960 this.context.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20) 1961 this.context.stroke() 1962 }) 1963 } 1964 .width('100%') 1965 .height('100%') 1966 } 1967 } 1968 ``` 1969 1970  1971 1972 1973### fill 1974 1975fill(fillRule?: CanvasFillRule): void 1976 1977对封闭路径进行填充。 1978 1979**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1980 1981**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1982 1983**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1984 1985**参数:** 1986 1987| 参数名 | 类型 | 必填 | 说明 | 1988| -------- | -------------- | ---- | ---------------------------------------- | 1989| fillRule | [CanvasFillRule](ts-canvasrenderingcontext2d.md#canvasfillrule) | 否 | 指定要填充对象的规则。<br/>可选参数为："nonzero", "evenodd"。<br>默认值："nonzero"。 | 1990 1991 1992**示例:** 1993 1994 ```ts 1995 // xxx.ets 1996 @Entry 1997 @Component 1998 struct Fill { 1999 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2000 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2001 2002 build() { 2003 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2004 Canvas(this.context) 2005 .width('100%') 2006 .height('100%') 2007 .backgroundColor('#ffff00') 2008 .onReady(() =>{ 2009 this.context.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20) 2010 this.context.fill() 2011 }) 2012 } 2013 .width('100%') 2014 .height('100%') 2015 } 2016 } 2017 ``` 2018 2019  2020 2021 2022fill(path: Path2D, fillRule?: CanvasFillRule): void 2023 2024对封闭路径进行填充。 2025 2026**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2027 2028**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2029 2030**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2031 2032**参数:** 2033 2034| 参数名 | 类型 | 必填 | 说明 | 2035| -------- | -------------- | ---- | ---------------------------------------- | 2036| path | [Path2D](ts-components-canvas-path2d.md) | 是 | Path2D填充路径。 | 2037| fillRule | [CanvasFillRule](ts-canvasrenderingcontext2d.md#canvasfillrule) | 否 | 指定要填充对象的规则。<br/>可选参数为："nonzero", "evenodd"。<br>默认值："nonzero"。 | 2038 2039 2040**示例:** 2041 2042```ts 2043// xxx.ets 2044@Entry 2045@Component 2046struct Fill { 2047 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2048 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2049 2050 build() { 2051 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2052 Canvas(this.context) 2053 .width('100%') 2054 .height('100%') 2055 .backgroundColor('#ffff00') 2056 .onReady(() =>{ 2057 let region = new Path2D() 2058 region.moveTo(30, 90) 2059 region.lineTo(110, 20) 2060 region.lineTo(240, 130) 2061 region.lineTo(60, 130) 2062 region.lineTo(190, 20) 2063 region.lineTo(270, 90) 2064 region.closePath() 2065 // Fill path 2066 this.context.fillStyle = '#00ff00' 2067 this.context.fill(region, "evenodd") 2068 }) 2069 } 2070 .width('100%') 2071 .height('100%') 2072 } 2073} 2074``` 2075 2076  2077 2078 2079### clip 2080 2081clip(fillRule?: CanvasFillRule): void 2082 2083设置当前路径为剪切路径。 2084 2085**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2086 2087**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2088 2089**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2090 2091**参数:** 2092 2093| 参数名 | 类型 | 必填 | 说明 | 2094| -------- | -------------- | ---- | ---------------------------------------- | 2095| fillRule | [CanvasFillRule](#canvasfillrule) | 否 | 指定要剪切对象的规则。<br/>可选参数为："nonzero", "evenodd"。 <br>默认值："nonzero"。 | 2096 2097**示例:** 2098 2099 ```ts 2100 // xxx.ets 2101 @Entry 2102 @Component 2103 struct Clip { 2104 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2105 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2106 2107 build() { 2108 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2109 Canvas(this.context) 2110 .width('100%') 2111 .height('100%') 2112 .backgroundColor('#ffff00') 2113 .onReady(() =>{ 2114 this.context.rect(0, 0, 100, 200) 2115 this.context.stroke() 2116 this.context.clip() 2117 this.context.fillStyle = "rgb(255,0,0)" 2118 this.context.fillRect(0, 0, 200, 200) 2119 }) 2120 } 2121 .width('100%') 2122 .height('100%') 2123 } 2124 } 2125 ``` 2126 2127  2128 2129 2130clip(path: Path2D, fillRule?: CanvasFillRule): void 2131 2132设置当前路径为剪切路径 2133 2134**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2135 2136**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2137 2138**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2139 2140**参数:** 2141 2142| 参数名 | 类型 | 必填 | 说明 | 2143| -------- | -------------- | ---- | ---------------------------------------- | 2144| path | [Path2D](ts-components-canvas-path2d.md) | 是 | Path2D剪切路径。 | 2145| fillRule | [CanvasFillRule](#canvasfillrule) | 否 | 指定要剪切对象的规则。<br/>可选参数为："nonzero", "evenodd"。 <br>默认值："nonzero"。 | 2146 2147 2148**示例:** 2149 2150 ```ts 2151 // xxx.ets 2152 @Entry 2153 @Component 2154 struct Clip { 2155 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2156 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2157 build() { 2158 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2159 Canvas(this.context) 2160 .width('100%') 2161 .height('100%') 2162 .backgroundColor('#ffff00') 2163 .onReady(() =>{ 2164 let region = new Path2D() 2165 region.moveTo(30, 90) 2166 region.lineTo(110, 20) 2167 region.lineTo(240, 130) 2168 region.lineTo(60, 130) 2169 region.lineTo(190, 20) 2170 region.lineTo(270, 90) 2171 region.closePath() 2172 this.context.clip(region,"evenodd") 2173 this.context.fillStyle = "rgb(0,255,0)" 2174 this.context.fillRect(0, 0, this.context.width, this.context.height) 2175 }) 2176 } 2177 .width('100%') 2178 .height('100%') 2179 } 2180 } 2181 ``` 2182 2183  2184 2185 2186### reset<sup>12+</sup> 2187 2188reset(): void 2189 2190将CanvasRenderingContext2D重置为其默认状态，清除后台缓冲区、绘制状态栈、绘制路径和样式。 2191 2192**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 2193 2194**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2195 2196**示例：** 2197 2198 ```ts 2199 // xxx.ets 2200 @Entry 2201 @Component 2202 struct Reset { 2203 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2204 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2205 2206 build() { 2207 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2208 Canvas(this.context) 2209 .width('100%') 2210 .height('100%') 2211 .backgroundColor('#ffff00') 2212 .onReady(() =>{ 2213 this.context.fillStyle = '#0000ff' 2214 this.context.fillRect(20, 20, 150, 100) 2215 this.context.reset() 2216 this.context.fillRect(20, 150, 150, 100) 2217 }) 2218 } 2219 .width('100%') 2220 .height('100%') 2221 } 2222 } 2223 ``` 2224 2225  2226 2227 2228### saveLayer<sup>12+</sup> 2229 2230saveLayer(): void 2231 2232创建一个图层。 2233 2234**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 2235 2236**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2237 2238**示例：** 2239 2240 ```ts 2241 // xxx.ets 2242 @Entry 2243 @Component 2244 struct saveLayer { 2245 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2246 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2247 2248 build() { 2249 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2250 Canvas(this.context) 2251 .width('100%') 2252 .height('100%') 2253 .backgroundColor('#ffff00') 2254 .onReady(() =>{ 2255 this.context.fillStyle = "#0000ff" 2256 this.context.fillRect(50,100,300,100) 2257 this.context.fillStyle = "#00ffff" 2258 this.context.fillRect(50,150,300,100) 2259 this.context.globalCompositeOperation = 'destination-over' 2260 this.context.saveLayer() 2261 this.context.globalCompositeOperation = 'source-over' 2262 this.context.fillStyle = "#ff0000" 2263 this.context.fillRect(100,50,100,300) 2264 this.context.fillStyle = "#00ff00" 2265 this.context.fillRect(150,50,100,300) 2266 this.context.restoreLayer() 2267 }) 2268 } 2269 .width('100%') 2270 .height('100%') 2271 } 2272 } 2273 2274 ``` 2275  2276 2277### restoreLayer<sup>12+</sup> 2278 2279restoreLayer(): void 2280 2281恢复图像变换和裁剪状态至saveLayer前的状态，并将图层绘制在canvas上。restoreLayer示例代码同saveLayer。 2282 2283**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 2284 2285**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2286 2287### resetTransform 2288 2289resetTransform(): void 2290 2291使用单位矩阵重新设置当前矩阵。 2292 2293**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2294 2295**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2296 2297**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2298 2299**示例：** 2300 2301 ```ts 2302 // xxx.ets 2303 @Entry 2304 @Component 2305 struct ResetTransform { 2306 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2307 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2308 2309 build() { 2310 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2311 Canvas(this.context) 2312 .width('100%') 2313 .height('100%') 2314 .backgroundColor('#ffff00') 2315 .onReady(() =>{ 2316 this.context.setTransform(1,0.5, -0.5, 1, 10, 10) 2317 this.context.fillStyle = 'rgb(0,0,255)' 2318 this.context.fillRect(0, 0, 100, 100) 2319 this.context.resetTransform() 2320 this.context.fillStyle = 'rgb(255,0,0)' 2321 this.context.fillRect(0, 0, 100, 100) 2322 }) 2323 } 2324 .width('100%') 2325 .height('100%') 2326 } 2327 } 2328 ``` 2329 2330  2331 2332### rotate 2333 2334rotate(angle: number): void 2335 2336针对当前坐标轴进行顺时针旋转。 2337 2338**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2339 2340**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2341 2342**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2343 2344**参数：** 2345 2346| 参数名 | 类型 | 必填 | 说明 | 2347| ----- | ------ | ---- | ---------------------------------------- | 2348| angle | number | 是 | 设置顺时针旋转的弧度值，可以通过 degree * Math.PI / 180 将角度转换为弧度值。<br>单位：弧度。 | 2349 2350**示例：** 2351 2352 ```ts 2353 // xxx.ets 2354 @Entry 2355 @Component 2356 struct Rotate { 2357 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2358 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2359 2360 build() { 2361 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2362 Canvas(this.context) 2363 .width('100%') 2364 .height('100%') 2365 .backgroundColor('#ffff00') 2366 .onReady(() =>{ 2367 this.context.rotate(45 * Math.PI / 180) 2368 this.context.fillRect(70, 20, 50, 50) 2369 }) 2370 } 2371 .width('100%') 2372 .height('100%') 2373 } 2374 } 2375 ``` 2376 2377  2378 2379 2380### scale 2381 2382scale(x: number, y: number): void 2383 2384设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。 2385 2386**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2387 2388**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2389 2390**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2391 2392**参数：** 2393 2394| 参数名 | 类型 | 必填 | 说明 | 2395| ---- | ------ | ---- | ----------- | 2396| x | number | 是 | 设置水平方向的缩放值。 | 2397| y | number | 是 | 设置垂直方向的缩放值。 | 2398 2399**示例：** 2400 2401 ```ts 2402 // xxx.ets 2403 @Entry 2404 @Component 2405 struct Scale { 2406 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2407 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2408 2409 build() { 2410 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2411 Canvas(this.context) 2412 .width('100%') 2413 .height('100%') 2414 .backgroundColor('#ffff00') 2415 .onReady(() =>{ 2416 this.context.lineWidth = 3 2417 this.context.strokeRect(30, 30, 50, 50) 2418 this.context.scale(2, 2) // Scale to 200% 2419 this.context.strokeRect(30, 30, 50, 50) 2420 }) 2421 } 2422 .width('100%') 2423 .height('100%') 2424 } 2425 } 2426 ``` 2427 2428  2429 2430 2431### transform 2432 2433transform(a: number, b: number, c: number, d: number, e: number, f: number): void 2434 2435transform方法对应一个变换矩阵，想对一个图形进行变化的时候，只要设置此变换矩阵相应的参数，对图形的各个定点的坐标分别乘以这个矩阵，就能得到新的定点的坐标。矩阵变换效果可叠加。 2436 2437**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2438 2439**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2440 2441**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2442 2443> **说明：** 2444> 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）： 2445> 2446> - x' = scaleX \* x + skewY \* y + translateX 2447> 2448> - y' = skewX \* x + scaleY \* y + translateY 2449 2450**参数：** 2451 2452| 参数名 | 类型 | 必填 | 说明 | 2453| ---- | ------ | ---- | -------------------- | 2454| a | number | 是 | scaleX: 指定水平缩放值。 | 2455| b | number | 是 | skewY: 指定垂直倾斜值。 | 2456| c | number | 是 | skewX: 指定水平倾斜值。 | 2457| d | number | 是 | scaleY: 指定垂直缩放值。 | 2458| e | number | 是 | translateX: 指定水平移动值。<br>默认单位：vp。 | 2459| f | number | 是 | translateY: 指定垂直移动值。<br>默认单位：vp。 | 2460 2461**示例：** 2462 2463 ```ts 2464 // xxx.ets 2465 @Entry 2466 @Component 2467 struct Transform { 2468 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2469 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2470 2471 build() { 2472 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2473 Canvas(this.context) 2474 .width('100%') 2475 .height('100%') 2476 .backgroundColor('#ffff00') 2477 .onReady(() =>{ 2478 this.context.fillStyle = 'rgb(0,0,0)' 2479 this.context.fillRect(0, 0, 100, 100) 2480 this.context.transform(1, 0.5, -0.5, 1, 10, 10) 2481 this.context.fillStyle = 'rgb(255,0,0)' 2482 this.context.fillRect(0, 0, 100, 100) 2483 this.context.transform(1, 0.5, -0.5, 1, 10, 10) 2484 this.context.fillStyle = 'rgb(0,0,255)' 2485 this.context.fillRect(0, 0, 100, 100) 2486 }) 2487 } 2488 .width('100%') 2489 .height('100%') 2490 } 2491 } 2492 ``` 2493 2494  2495 2496 2497### setTransform 2498 2499setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void 2500 2501setTransform方法使用的参数和transform()方法相同，但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。 2502 2503**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2504 2505**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2506 2507**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2508 2509**参数：** 2510 2511| 参数名 | 类型 | 必填 | 说明 | 2512| ---- | ------ | ---- | -------------------- | 2513| a | number | 是 | scaleX: 指定水平缩放值。 | 2514| b | number | 是 | skewY: 指定垂直倾斜值。 | 2515| c | number | 是 | skewX: 指定水平倾斜值。 | 2516| d | number | 是 | scaleY: 指定垂直缩放值。 | 2517| e | number | 是 | translateX: 指定水平移动值。<br>默认单位：vp。 | 2518| f | number | 是 | translateY: 指定垂直移动值。<br>默认单位：vp。 | 2519 2520**示例：** 2521 2522 ```ts 2523 // xxx.ets 2524 @Entry 2525 @Component 2526 struct SetTransform { 2527 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2528 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2529 2530 build() { 2531 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2532 Canvas(this.context) 2533 .width('100%') 2534 .height('100%') 2535 .backgroundColor('#ffff00') 2536 .onReady(() =>{ 2537 this.context.fillStyle = 'rgb(255,0,0)' 2538 this.context.fillRect(0, 0, 100, 100) 2539 this.context.setTransform(1,0.5, -0.5, 1, 10, 10) 2540 this.context.fillStyle = 'rgb(0,0,255)' 2541 this.context.fillRect(0, 0, 100, 100) 2542 }) 2543 } 2544 .width('100%') 2545 .height('100%') 2546 } 2547 } 2548 ``` 2549 2550  2551 2552### setTransform 2553 2554setTransform(transform?: Matrix2D): void 2555 2556以Matrix2D对象为模板重置现有的变换矩阵并创建新的变换矩阵。 2557 2558**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2559 2560**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2561 2562**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2563 2564**参数：** 2565 2566| 参数名 | 类型 | 必填 | 说明 | 2567| --------- | ---------------------------------------- | ---- | ----- | 2568| transform | [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | 否 | 变换矩阵。<br>默认值：null。 | 2569 2570**示例：** 2571 2572 ```ts 2573 // xxx.ets 2574 @Entry 2575 @Component 2576 struct TransFormDemo { 2577 private settings: RenderingContextSettings = new RenderingContextSettings(true); 2578 private context1: CanvasRenderingContext2D = new CanvasRenderingContext2D(this. settings); 2579 private context2: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2580 2581 build() { 2582 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2583 Text('context1'); 2584 Canvas(this.context1) 2585 .width('230vp') 2586 .height('160vp') 2587 .backgroundColor('#ffff00') 2588 .onReady(() =>{ 2589 this.context1.fillRect(100, 20, 50, 50); 2590 this.context1.setTransform(1, 0.5, -0.5, 1, 10, 10); 2591 this.context1.fillRect(100, 20, 50, 50); 2592 }) 2593 Text('context2'); 2594 Canvas(this.context2) 2595 .width('230vp') 2596 .height('160vp') 2597 .backgroundColor('#0ffff0') 2598 .onReady(() =>{ 2599 this.context2.fillRect(100, 20, 50, 50); 2600 let storedTransform = this.context1.getTransform(); 2601 this.context2.setTransform(storedTransform); 2602 this.context2.fillRect(100, 20, 50, 50); 2603 }) 2604 } 2605 .width('100%') 2606 .height('100%') 2607 } 2608 } 2609 ``` 2610 2611  2612 2613### getTransform 2614 2615getTransform(): Matrix2D 2616 2617获取当前被应用到上下文的转换矩阵。 2618 2619**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2620 2621**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2622 2623**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2624 2625**返回值：** 2626 2627| 类型 | 说明 | 2628| ---------------------------------------- | ----- | 2629| [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | 矩阵对象。 | 2630 2631**示例：** 2632 2633 ```ts 2634 // xxx.ets 2635 @Entry 2636 @Component 2637 struct TransFormDemo { 2638 private settings: RenderingContextSettings = new RenderingContextSettings(true); 2639 private context1: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2640 private context2: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2641 2642 build() { 2643 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2644 Text('context1'); 2645 Canvas(this.context1) 2646 .width('230vp') 2647 .height('120vp') 2648 .backgroundColor('#ffff00') 2649 .onReady(() =>{ 2650 this.context1.fillRect(50, 50, 50, 50); 2651 this.context1.setTransform(1.2, Math.PI/8, Math.PI/6, 0.5, 30, -25); 2652 this.context1.fillRect(50, 50, 50, 50); 2653 }) 2654 Text('context2'); 2655 Canvas(this.context2) 2656 .width('230vp') 2657 .height('120vp') 2658 .backgroundColor('#0ffff0') 2659 .onReady(() =>{ 2660 this.context2.fillRect(50, 50, 50, 50); 2661 let storedTransform = this.context1.getTransform(); 2662 console.log("Matrix [scaleX = " + storedTransform.scaleX + ", scaleY = " + storedTransform.scaleY + 2663 ", rotateX = " + storedTransform.rotateX + ", rotateY = " + storedTransform.rotateY + 2664 ", translateX = " + storedTransform.translateX + ", translateY = " + storedTransform.translateY + "]") 2665 this.context2.setTransform(storedTransform); 2666 this.context2.fillRect(50,50,50,50); 2667 }) 2668 } 2669 .width('100%') 2670 .height('100%') 2671 } 2672 } 2673 ``` 2674 2675  2676 2677### translate 2678 2679translate(x: number, y: number): void 2680 2681移动当前坐标系的原点。 2682 2683**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2684 2685**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2686 2687**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2688 2689**参数：** 2690 2691| 参数名 | 类型 | 必填 | 说明 | 2692| ---- | ------ | ---- | -------- | 2693| x | number | 是 | 设置水平平移量。<br>默认单位：vp。 | 2694| y | number | 是 | 设置竖直平移量。<br>默认单位：vp。 | 2695 2696**示例：** 2697 2698 ```ts 2699 // xxx.ets 2700 @Entry 2701 @Component 2702 struct Translate { 2703 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2704 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2705 2706 build() { 2707 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2708 Canvas(this.context) 2709 .width('100%') 2710 .height('100%') 2711 .backgroundColor('#ffff00') 2712 .onReady(() =>{ 2713 this.context.fillRect(10, 10, 50, 50) 2714 this.context.translate(70, 70) 2715 this.context.fillRect(10, 10, 50, 50) 2716 }) 2717 } 2718 .width('100%') 2719 .height('100%') 2720 } 2721 } 2722 ``` 2723 2724  2725 2726 2727### drawImage 2728 2729drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number): void 2730 2731进行图像绘制。 2732 2733**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用，卡片中不支持PixelMap对象。 2734 2735**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2736 2737**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2738 2739**参数：** 2740 2741| 参数名 | 类型 | 必填 | 说明 | 2742| ----- | ---------------------------------------- | ---- | ---------------------------------------- | 2743| image | [ImageBitmap](ts-components-canvas-imagebitmap.md)或[PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7) | 是 | 图片资源，请参考ImageBitmap或PixelMap。 | 2744| dx | number | 是 | 绘制区域左上角在x轴的位置。<br>默认单位：vp。| 2745| dy | number | 是 | 绘制区域左上角在y轴的位置。<br>默认单位：vp。| 2746 2747drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number, dw: number, dh: number): void 2748 2749进行图像绘制。 2750 2751**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用，卡片中不支持PixelMap对象。 2752 2753**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2754 2755**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2756 2757**参数：** 2758 2759| 参数名 | 类型 | 必填 | 说明 | 2760| ----- | ---------------------------------------- | ---- | ---------------------------------------- | 2761| image | [ImageBitmap](ts-components-canvas-imagebitmap.md)或[PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7) | 是 | 图片资源，请参考ImageBitmap或PixelMap。 | 2762| dx | number | 是 | 绘制区域左上角在x轴的位置。<br>默认单位：vp。| 2763| dy | number | 是 | 绘制区域左上角在y轴的位置。<br>默认单位：vp。| 2764| dw | number | 是 | 绘制区域的宽度。当绘制区域的宽度和裁剪图像的宽度不一致时，将图像宽度拉伸或压缩为绘制区域的宽度。<br>默认单位：vp。 | 2765| dh | number | 是 | 绘制区域的高度。当绘制区域的高度和裁剪图像的高度不一致时，将图像高度拉伸或压缩为绘制区域的高度。<br>默认单位：vp。 | 2766 2767drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void 2768 2769进行图像绘制。 2770 2771**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用，卡片中不支持PixelMap对象。 2772 2773**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2774 2775**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2776 2777**参数：** 2778 2779| 参数名 | 类型 | 必填 | 说明 | 2780| ----- | ---------------------------------------- | ---- | ---------------------------------------- | 2781| image | [ImageBitmap](ts-components-canvas-imagebitmap.md)或[PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7) | 是 | 图片资源，请参考ImageBitmap或PixelMap。 | 2782| sx | number | 是 | 裁切源图像时距离源图像左上角的x坐标值。<br>image类型为ImageBitmap时，默认单位：vp。<br>image类型为PixelMap时，单位：px。 | 2783| sy | number | 是 | 裁切源图像时距离源图像左上角的y坐标值。<br>image类型为ImageBitmap时，默认单位：vp。<br>image类型为PixelMap时，单位：px。 | 2784| sw | number | 是 | 裁切源图像时需要裁切的宽度。<br>image类型为ImageBitmap时，默认单位：vp。<br>image类型为PixelMap时，单位：px。 | 2785| sh | number | 是 | 裁切源图像时需要裁切的高度。<br>image类型为ImageBitmap时，默认单位：vp。<br>image类型为PixelMap时，单位：px。 | 2786| dx | number | 是 | 绘制区域左上角在x轴的位置。<br>默认单位：vp。| 2787| dy | number | 是 | 绘制区域左上角在y轴的位置。<br>默认单位：vp。| 2788| dw | number | 是 | 绘制区域的宽度。当绘制区域的宽度和裁剪图像的宽度不一致时，将图像宽度拉伸或压缩为绘制区域的宽度。<br>默认单位：vp。 | 2789| dh | number | 是 | 绘制区域的高度。当绘制区域的高度和裁剪图像的高度不一致时，将图像高度拉伸或压缩为绘制区域的高度。<br>默认单位：vp。 | 2790 2791**示例：** 2792 2793 ```ts 2794 // xxx.ets 2795 @Entry 2796 @Component 2797 struct ImageExample { 2798 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2799 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2800 private img: ImageBitmap = new ImageBitmap("common/images/example.jpg") 2801 2802 build() { 2803 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2804 Canvas(this.context) 2805 .width('100%') 2806 .height('100%') 2807 .backgroundColor('#ffff00') 2808 .onReady(() => { 2809 this.context.drawImage(this.img, 0, 0) 2810 this.context.drawImage(this.img, 0, 150, 300, 100) 2811 this.context.drawImage(this.img, 0, 0, 500, 500, 0, 300, 400, 200) 2812 }) 2813 } 2814 .width('100%') 2815 .height('100%') 2816 } 2817 } 2818 ``` 2819 2820  2821 2822 2823### createImageData 2824 2825createImageData(sw: number, sh: number): ImageData 2826 2827创建新的、空白的、指定大小的ImageData 对象，请参考[ImageData](ts-components-canvas-imagedata.md)，该接口存在内存拷贝行为，高耗时，应避免频繁使用。createImageData示例同putImageData。 2828 2829**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2830 2831**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2832 2833**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2834 2835**参数：** 2836 2837| 参数名 | 类型 | 必填 | 说明 | 2838| ---- | ------ | ---- | ------------- | 2839| sw | number | 是 | ImageData的宽度。<br>默认单位：vp。 | 2840| sh | number | 是 | ImageData的高度。<br>默认单位：vp。 | 2841 2842 2843createImageData(imageData: ImageData): ImageData 2844 2845根据一个现有的ImageData对象重新创建一个宽、高相同的ImageData对象（不会复制图像数据），请参考[ImageData](ts-components-canvas-imagedata.md)，该接口存在内存拷贝行为，高耗时，应避免频繁使用。createImageData示例同putImageData。 2846 2847**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2848 2849**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2850 2851**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2852 2853**参数：** 2854 2855| 参数名 | 类型 | 必填 | 说明 | 2856| --------- | ---------------------------------------- | ---- | ----------------- | 2857| imagedata | [ImageData](ts-components-canvas-imagedata.md) | 是 | 现有的ImageData对象。 | 2858 2859 **返回值：** 2860 2861| 类型 | 说明 | 2862| ---------------------------------------- | -------------- | 2863| [ImageData](ts-components-canvas-imagedata.md) | 新的ImageData对象。 | 2864 2865 2866### getPixelMap 2867 2868getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap 2869 2870以当前canvas指定区域内的像素创建[PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7)对象，该接口存在内存拷贝行为，高耗时，应避免频繁使用。 2871 2872**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2873 2874**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2875 2876**参数：** 2877 2878| 参数名 | 类型 | 必填 | 说明 | 2879| ---- | ------ | ---- | --------------- | 2880| sx | number | 是 | 需要输出的区域的左上角x坐标。<br>默认单位：vp。 | 2881| sy | number | 是 | 需要输出的区域的左上角y坐标。<br>默认单位：vp。 | 2882| sw | number | 是 | 需要输出的区域的宽度。<br>默认单位：vp。 | 2883| sh | number | 是 | 需要输出的区域的高度。<br>默认单位：vp。 | 2884 2885**返回值：** 2886 2887| 类型 | 说明 | 2888| ---------------------------------------- | ------------- | 2889| [PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7) | 新的PixelMap对象。 | 2890 2891**示例：** 2892 2893 ```ts 2894 // xxx.ets 2895 @Entry 2896 @Component 2897 struct GetPixelMap { 2898 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2899 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2900 private img: ImageBitmap = new ImageBitmap("common/images/example.jpg") 2901 2902 build() { 2903 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2904 Canvas(this.context) 2905 .width('100%') 2906 .height('100%') 2907 .backgroundColor('#ffff00') 2908 .onReady(() => { 2909 this.context.drawImage(this.img, 100, 100, 130, 130) 2910 let pixelmap = this.context.getPixelMap(150, 150, 130, 130) 2911 this.context.setPixelMap(pixelmap) 2912 }) 2913 } 2914 .width('100%') 2915 .height('100%') 2916 } 2917 } 2918 ``` 2919 2920  2921 2922### setPixelMap 2923 2924setPixelMap(value?: PixelMap): void 2925 2926将当前传入[PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7)对象绘制在画布上。setPixelMap示例同getPixelMap。 2927 2928**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2929 2930**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2931 2932 **参数：** 2933 2934| 参数名 | 类型 | 必填 | 说明 | 2935| ---- | ------ | ---- | --------------- | 2936| value | [PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7) | 否 | 包含像素值的PixelMap对象<br>默认值：null。 | 2937 2938### getImageData 2939 2940getImageData(sx: number, sy: number, sw: number, sh: number): ImageData 2941 2942以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagedata.md)对象，该接口存在内存拷贝行为，高耗时，应避免频繁使用。 2943 2944**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2945 2946**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2947 2948**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2949 2950**参数：** 2951 2952| 参数名 | 类型 | 必填 | 说明 | 2953| ---- | ------ | ---- | --------------- | 2954| sx | number | 是 | 需要输出的区域的左上角x坐标。<br>默认单位：vp。 | 2955| sy | number | 是 | 需要输出的区域的左上角y坐标。<br>默认单位：vp。 | 2956| sw | number | 是 | 需要输出的区域的宽度。<br>默认单位：vp。 | 2957| sh | number | 是 | 需要输出的区域的高度。<br>默认单位：vp。 | 2958 2959 **返回值：** 2960 2961| 类型 | 说明 | 2962| ---------------------------------------- | -------------- | 2963| [ImageData](ts-components-canvas-imagedata.md) | 新的ImageData对象。 | 2964 2965 2966**示例：** 2967 2968 ```ts 2969 // xxx.ets 2970 @Entry 2971 @Component 2972 struct GetImageData { 2973 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2974 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2975 private img:ImageBitmap = new ImageBitmap("/common/images/1234.png") 2976 2977 build() { 2978 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2979 Canvas(this.context) 2980 .width('100%') 2981 .height('100%') 2982 .backgroundColor('#ffff00') 2983 .onReady(() =>{ 2984 this.context.drawImage(this.img,0,0,130,130) 2985 let imagedata = this.context.getImageData(50,50,130,130) 2986 this.context.putImageData(imagedata,150,150) 2987 }) 2988 } 2989 .width('100%') 2990 .height('100%') 2991 } 2992 } 2993 ``` 2994 2995  2996 2997 2998### putImageData 2999 3000putImageData(imageData: ImageData, dx: number | string, dy: number | string): void 3001 3002使用[ImageData](ts-components-canvas-imagedata.md)数据填充新的矩形区域。 3003 3004**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3005 3006**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3007 3008**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3009 3010**参数：** 3011 3012| 参数名 | 类型 | 必填 | 说明 | 3013| ----------- | ---------------------------------------- | ---- | ----------------------------- | 3014| imagedata | [ImageData](ts-components-canvas-imagedata.md) | 是 | 包含像素值的ImageData对象。 | 3015| dx | number \| string<sup>10+</sup> | 是 | 填充区域在x轴方向的偏移量。<br>默认单位：vp。 | 3016| dy | number \| string<sup>10+</sup> | 是 | 填充区域在y轴方向的偏移量。<br>默认单位：vp。 | 3017 3018putImageData(imageData: ImageData, dx: number | string, dy: number | string, dirtyX: number | string, dirtyY: number | string, dirtyWidth: number | string, dirtyHeight: number | string): void 3019 3020使用[ImageData](ts-components-canvas-imagedata.md)数据填充新的矩形区域。 3021 3022**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3023 3024**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3025 3026**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3027 3028**参数：** 3029 3030| 参数名 | 类型 | 必填 | 说明 | 3031| ----------- | ---------------------------------------- | ---- | ----------------------------- | 3032| imagedata | [ImageData](ts-components-canvas-imagedata.md) | 是 | 包含像素值的ImageData对象。 | 3033| dx | number \| string<sup>10+</sup> | 是 | 填充区域在x轴方向的偏移量。<br>默认单位：vp。 | 3034| dy | number \| string<sup>10+</sup> | 是 | 填充区域在y轴方向的偏移量。<br>默认单位：vp。 | 3035| dirtyX | number \| string<sup>10+</sup> | 是 | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。<br>默认单位：vp。 | 3036| dirtyY | number \| string<sup>10+</sup> | 是 | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。<br>默认单位：vp。 | 3037| dirtyWidth | number \| string<sup>10+</sup> | 是 | 源图像数据矩形裁切范围的宽度。<br>默认单位：vp。 | 3038| dirtyHeight | number \| string<sup>10+</sup> | 是 | 源图像数据矩形裁切范围的高度。<br>默认单位：vp。 | 3039 3040**示例：** 3041 3042 ```ts 3043 // xxx.ets 3044 @Entry 3045 @Component 3046 struct PutImageData { 3047 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3048 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3049 3050 build() { 3051 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3052 Canvas(this.context) 3053 .width('100%') 3054 .height('100%') 3055 .backgroundColor('#ffff00') 3056 .onReady(() => { 3057 let imageDataNum = this.context.createImageData(100, 100) 3058 let imageData = this.context.createImageData(imageDataNum) 3059 for (let i = 0; i < imageData.data.length; i += 4) { 3060 imageData.data[i + 0] = 255 3061 imageData.data[i + 1] = 0 3062 imageData.data[i + 2] = 255 3063 imageData.data[i + 3] = 255 3064 } 3065 this.context.putImageData(imageData, 10, 10) 3066 this.context.putImageData(imageData, 150, 10, 0, 0, 50, 50) 3067 }) 3068 } 3069 .width('100%') 3070 .height('100%') 3071 } 3072 } 3073 ``` 3074 3075  3076 3077 3078### setLineDash 3079 3080setLineDash(segments: number[]): void 3081 3082设置画布的虚线样式。 3083 3084**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3085 3086**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3087 3088**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3089 3090**参数：** 3091 3092| 参数名 | 类型 | 必填 | 说明 | 3093| -------- | -------- | ------- | ------------ | 3094| segments | number[] | 是 | 描述线段如何交替和线段间距长度的数组。<br>默认单位：vp。 | 3095 3096**示例：** 3097 3098 ```ts 3099 // xxx.ets 3100 @Entry 3101 @Component 3102 struct SetLineDash { 3103 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3104 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3105 3106 build() { 3107 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3108 Canvas(this.context) 3109 .width('100%') 3110 .height('100%') 3111 .backgroundColor('#ffff00') 3112 .onReady(() =>{ 3113 this.context.arc(100, 75, 50, 0, 6.28) 3114 this.context.setLineDash([10,20]) 3115 this.context.stroke() 3116 }) 3117 } 3118 .width('100%') 3119 .height('100%') 3120 } 3121 } 3122 ``` 3123 3124  3125 3126 3127### getLineDash 3128 3129getLineDash(): number[] 3130 3131获得当前画布的虚线样式。 3132 3133**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3134 3135**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3136 3137**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3138 3139**返回值：** 3140 3141| 类型 | 说明 | 3142| -------- | ------------------------ | 3143| number[] | 返回数组，该数组用来描述线段如何交替和间距长度。<br>默认单位：vp。 | 3144 3145 3146**示例：** 3147 3148 ```ts 3149 // xxx.ets 3150 @Entry 3151 @Component 3152 struct CanvasGetLineDash { 3153 @State message: string = 'Hello World' 3154 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3155 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3156 3157 build() { 3158 Row() { 3159 Column() { 3160 Text(this.message) 3161 .fontSize(50) 3162 .fontWeight(FontWeight.Bold) 3163 .onClick(()=>{ 3164 console.error('before getlinedash clicked') 3165 let res = this.context.getLineDash() 3166 console.error(JSON.stringify(res)) 3167 }) 3168 Canvas(this.context) 3169 .width('100%') 3170 .height('100%') 3171 .backgroundColor('#ffff00') 3172 .onReady(() => { 3173 this.context.arc(100, 75, 50, 0, 6.28) 3174 this.context.setLineDash([10,20]) 3175 this.context.stroke() 3176 }) 3177 } 3178 .width('100%') 3179 } 3180 .height('100%') 3181 } 3182 } 3183 ``` 3184 3185 3186 3187### transferFromImageBitmap 3188 3189transferFromImageBitmap(bitmap: ImageBitmap): void 3190 3191显示给定的ImageBitmap对象。 3192 3193**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3194 3195**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3196 3197**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3198 3199**参数：** 3200 3201| 参数名 | 类型 | 必填 | 说明 | 3202| ------ | ----------------------- | ----------------- | ------------------ | 3203| bitmap | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | 待显示的ImageBitmap对象。 | 3204 3205**示例：** 3206 3207 ```ts 3208 // xxx.ets 3209 @Entry 3210 @Component 3211 struct TransferFromImageBitmap { 3212 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3213 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3214 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 3215 3216 build() { 3217 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3218 Canvas(this.context) 3219 .width('100%') 3220 .height('100%') 3221 .backgroundColor('#ffff00') 3222 .onReady(() =>{ 3223 let imageData = this.offContext.createImageData(100, 100) 3224 for (let i = 0; i < imageData.data.length; i += 4) { 3225 imageData.data[i + 0] = 255 3226 imageData.data[i + 1] = 0 3227 imageData.data[i + 2] = 255 3228 imageData.data[i + 3] = 255 3229 } 3230 this.offContext.putImageData(imageData, 10, 10) 3231 let image = this.offContext.transferToImageBitmap() 3232 this.context.transferFromImageBitmap(image) 3233 }) 3234 } 3235 .width('100%') 3236 .height('100%') 3237 } 3238 } 3239 ``` 3240  3241 3242 3243### toDataURL 3244 3245toDataURL(type?: string, quality?: any): string 3246 3247生成一个包含图片展示的URL，该接口存在内存拷贝行为，高耗时，应避免频繁使用。 3248 3249**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3250 3251**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3252 3253**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3254 3255**参数：** 3256 3257| 参数名 | 类型 | 必填 | 说明 | 3258| ------- | ------ | ---- | ---------------------------------------- | 3259| type | string | 否 | 用于指定图像格式。<br/>可选参数为："image/png", "image/jpeg", "image/webp"。。<br>默认值：image/png。 | 3260| quality | any | 否 | 在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。<br>默认值：0.92。 | 3261 3262**返回值：** 3263 3264| 类型 | 说明 | 3265| ------ | --------- | 3266| string | 图像的URL地址。 | 3267 3268**示例：** 3269 3270 ```ts 3271 // xxx.ets 3272 @Entry 3273 @Component 3274 struct CanvasExample { 3275 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3276 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3277 @State toDataURL: string = "" 3278 3279 build() { 3280 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3281 Canvas(this.context) 3282 .width(100) 3283 .height(100) 3284 .onReady(() =>{ 3285 this.context.fillStyle = "#00ff00" 3286 this.context.fillRect(0,0,100,100) 3287 this.toDataURL = this.context.toDataURL("image/png", 0.92) 3288 }) 3289 Text(this.toDataURL) 3290 } 3291 .width('100%') 3292 .height('100%') 3293 .backgroundColor('#ffff00') 3294 } 3295 } 3296 ``` 3297  3298 3299 3300### restore 3301 3302restore(): void 3303 3304对保存的绘图上下文进行恢复。 3305 3306> **说明：** 3307> 3308> 当restore()次数未超出save()次数时，从栈中弹出存储的绘制状态并恢复CanvasRenderingContext2D对象的属性、剪切路径和变换矩阵的值。</br> 3309> 当restore()次数超出save()次数时，此方法不做任何改变。</br> 3310> 当没有保存状态时，此方法不做任何改变。 3311 3312**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3313 3314**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3315 3316**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3317 3318**示例：** 3319 3320 ```ts 3321 // xxx.ets 3322 @Entry 3323 @Component 3324 struct CanvasExample { 3325 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3326 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3327 3328 build() { 3329 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3330 Canvas(this.context) 3331 .width('100%') 3332 .height('100%') 3333 .backgroundColor('#ffff00') 3334 .onReady(() =>{ 3335 this.context.save() // save the default state 3336 this.context.fillStyle = "#00ff00" 3337 this.context.fillRect(20, 20, 100, 100) 3338 this.context.restore() // restore to the default state 3339 this.context.fillRect(150, 75, 100, 100) 3340 }) 3341 } 3342 .width('100%') 3343 .height('100%') 3344 } 3345 } 3346 ``` 3347  3348 3349 3350### save 3351 3352save(): void 3353 3354将当前状态放入栈中，保存canvas的全部状态，通常在需要保存绘制状态时调用。 3355 3356**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3357 3358**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3359 3360**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3361 3362**示例：** 3363 3364 ```ts 3365 // xxx.ets 3366 @Entry 3367 @Component 3368 struct CanvasExample { 3369 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3370 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3371 3372 build() { 3373 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3374 Canvas(this.context) 3375 .width('100%') 3376 .height('100%') 3377 .backgroundColor('#ffff00') 3378 .onReady(() =>{ 3379 this.context.save() // save the default state 3380 this.context.fillStyle = "#00ff00" 3381 this.context.fillRect(20, 20, 100, 100) 3382 this.context.restore() // restore to the default state 3383 this.context.fillRect(150, 75, 100, 100) 3384 }) 3385 } 3386 .width('100%') 3387 .height('100%') 3388 } 3389 } 3390 ``` 3391  3392 3393 3394### createLinearGradient 3395 3396createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient 3397 3398创建一个线性渐变色。 3399 3400**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3401 3402**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3403 3404**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3405 3406**参数：** 3407 3408| 参数名 | 类型 | 必填 | 说明 | 3409| ---- | ------ | ---- | -------- | 3410| x0 | number | 是 | 起点的x轴坐标。<br>默认单位：vp。 | 3411| y0 | number | 是 | 起点的y轴坐标。<br>默认单位：vp。 | 3412| x1 | number | 是 | 终点的x轴坐标。<br>默认单位：vp。 | 3413| y1 | number | 是 | 终点的y轴坐标。<br>默认单位：vp。 | 3414 3415**返回值：** 3416 3417| 类型 | 说明 | 3418| ------ | --------- | 3419| [CanvasGradient](ts-components-canvas-canvasgradient.md) | 新的CanvasGradient对象，用于在canvas上创建渐变效果。 | 3420 3421**示例：** 3422 3423 ```ts 3424 // xxx.ets 3425 @Entry 3426 @Component 3427 struct CreateLinearGradient { 3428 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3429 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3430 3431 build() { 3432 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3433 Canvas(this.context) 3434 .width('100%') 3435 .height('100%') 3436 .backgroundColor('#ffff00') 3437 .onReady(() =>{ 3438 let grad = this.context.createLinearGradient(50,0, 300,100) 3439 grad.addColorStop(0.0, '#ff0000') 3440 grad.addColorStop(0.5, '#ffffff') 3441 grad.addColorStop(1.0, '#00ff00') 3442 this.context.fillStyle = grad 3443 this.context.fillRect(0, 0, 400, 400) 3444 }) 3445 } 3446 .width('100%') 3447 .height('100%') 3448 } 3449 } 3450 ``` 3451 3452  3453 3454 3455### createRadialGradient 3456 3457createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient 3458 3459创建一个径向渐变色。 3460 3461**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3462 3463**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3464 3465**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3466 3467**参数：** 3468 3469| 参数名 | 类型 | 必填 | 说明 | 3470| ---- | ------ | ---- | ----------------- | 3471| x0 | number | 是 | 起始圆的x轴坐标。<br>默认单位：vp。 | 3472| y0 | number | 是 | 起始圆的y轴坐标。<br>默认单位：vp。 | 3473| r0 | number | 是 | 起始圆的半径。必须是非负且有限的。<br>默认单位：vp。 | 3474| x1 | number | 是 | 终点圆的x轴坐标。<br>默认单位：vp。 | 3475| y1 | number | 是 | 终点圆的y轴坐标。<br>默认单位：vp。 | 3476| r1 | number | 是 | 终点圆的半径。必须为非负且有限的。<br>默认单位：vp。 | 3477 3478**返回值：** 3479 3480| 类型 | 说明 | 3481| ------ | --------- | 3482| [CanvasGradient](ts-components-canvas-canvasgradient.md) | 新的CanvasGradient对象，用于在canvas上创建渐变效果。 | 3483 3484**示例：** 3485 3486 ```ts 3487 // xxx.ets 3488 @Entry 3489 @Component 3490 struct CreateRadialGradient { 3491 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3492 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3493 3494 build() { 3495 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3496 Canvas(this.context) 3497 .width('100%') 3498 .height('100%') 3499 .backgroundColor('#ffff00') 3500 .onReady(() =>{ 3501 let grad = this.context.createRadialGradient(200,200,50, 200,200,200) 3502 grad.addColorStop(0.0, '#ff0000') 3503 grad.addColorStop(0.5, '#ffffff') 3504 grad.addColorStop(1.0, '#00ff00') 3505 this.context.fillStyle = grad 3506 this.context.fillRect(0, 0, 440, 440) 3507 }) 3508 } 3509 .width('100%') 3510 .height('100%') 3511 } 3512 } 3513 ``` 3514 3515  3516 3517### createConicGradient<sup>10+</sup> 3518 3519createConicGradient(startAngle: number, x: number, y: number): CanvasGradient 3520 3521创建一个圆锥渐变色。 3522 3523**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3524 3525**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3526 3527**参数：** 3528 3529| 参数名 | 类型 | 必填 | 说明 | 3530| ---------- | ------ | ---- | ----------------------------------- | 3531| startAngle | number | 是 | 开始渐变的角度。角度测量从中心右侧水平开始，顺时针移动。<br>单位：弧度。 | 3532| x | number | 是 | 圆锥渐变的中心x轴坐标。<br>默认单位：vp。 | 3533| y | number | 是 | 圆锥渐变的中心y轴坐标。<br>默认单位：vp。 | 3534 3535**返回值：** 3536 3537| 类型 | 说明 | 3538| ------ | --------- | 3539| [CanvasGradient](ts-components-canvas-canvasgradient.md) | 新的CanvasGradient对象，用于在canvas上创建渐变效果。 | 3540 3541**示例：** 3542 3543```ts 3544// xxx.ets 3545@Entry 3546@Component 3547struct CanvasExample { 3548 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3549 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3550 3551 build() { 3552 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3553 Canvas(this.context) 3554 .width('100%') 3555 .height('100%') 3556 .backgroundColor('#ffffff') 3557 .onReady(() => { 3558 let grad = this.context.createConicGradient(0, 50, 80) 3559 grad.addColorStop(0.0, '#ff0000') 3560 grad.addColorStop(0.5, '#ffffff') 3561 grad.addColorStop(1.0, '#00ff00') 3562 this.context.fillStyle = grad 3563 this.context.fillRect(0, 30, 100, 100) 3564 }) 3565 } 3566 .width('100%') 3567 .height('100%') 3568 } 3569} 3570``` 3571 3572  3573 3574### on('onAttach')<sup>13+</sup> 3575 3576on(type: 'onAttach', callback: () => void): void 3577 3578订阅CanvasRenderingContext2D与Canvas组件发生绑定的场景。 3579 3580**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 3581 3582**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3583 3584**参数：** 3585 3586| 参数名 | 类型 | 必填 | 说明 | 3587| ------ | --------- | ---- | ---------------------------------------------------------------------- | 3588| type | string | 是 | 订阅CanvasRenderingContext2D与Canvas组件发生绑定的回调 | 3589| callback | () => void | 是 | 订阅CanvasRenderingContext2D与Canvas组件发生绑定后触发的回调 | 3590 3591### on('onDetach')<sup>13+</sup> 3592 3593on(type: 'onDetach', callback: () => void): void 3594 3595订阅CanvasRenderingContext2D与Canvas组件解除绑定的场景。 3596 3597**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 3598 3599**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3600 3601**参数：** 3602 3603| 参数名 | 类型 | 必填 | 说明 | 3604| ------ | --------- | ---- | ---------------------------------------------------------------------- | 3605| type | string | 是 | 订阅CanvasRenderingContext2D与Canvas组件解除绑定的回调 | 3606| callback | () => void | 是 | 订阅CanvasRenderingContext2D与Canvas组件解除绑定后触发的回调 | 3607 3608### off('onAttach')<sup>13+</sup> 3609 3610off(type: 'onAttach', callback?: () => void): void 3611 3612取消订阅CanvasRenderingContext2D与Canvas组件发生绑定的场景。 3613 3614**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 3615 3616**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3617 3618**参数：** 3619 3620| 参数名 | 类型 | 必填 | 说明 | 3621| ------ | --------- | ---- | ---------------------------------------------------------------------- | 3622| type | string | 是 | 取消订阅CanvasRenderingContext2D与Canvas组件发生绑定的回调 | 3623| callback | () => void | 否 | 为空代表取消所有订阅CanvasRenderingContext2D与Canvas组件发生绑定后触发的回调。<br>非空代表取消订阅发生绑定对应的回调。 | 3624 3625### off('onDetach')<sup>13+</sup> 3626 3627off(type: 'onDetach', callback?: () => void): void 3628 3629取消订阅CanvasRenderingContext2D与Canvas组件解除绑定的场景。 3630 3631**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 3632 3633**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3634 3635**参数：** 3636 3637| 参数名 | 类型 | 必填 | 说明 | 3638| ------ | --------- | ---- | ---------------------------------------------------------------------- | 3639| type | string | 是 | 取消订阅CanvasRenderingContext2D与Canvas组件解除绑定的回调 | 3640| callback | () => void | 否 | 为空代表取消所有订阅CanvasRenderingContext2D与Canvas组件解除绑定后触发的回调。<br>非空代表取消订阅接触绑定对应的回调。 | 3641 3642**示例：** 3643 3644```ts 3645import { FrameNode } from '@kit.ArkUI' 3646// xxx.ets 3647@Entry 3648@Component 3649struct AttachDetachExample { 3650 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3651 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3652 private scroller: Scroller = new Scroller() 3653 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] 3654 private node: FrameNode | null = null 3655 3656 attachCallback(): void { 3657 console.info('CanvasRenderingContext2D attached to the canvas frame node.') 3658 this.node = this.context.canvas 3659 } 3660 detachCallback(): void { 3661 console.info('CanvasRenderingContext2D detach from the canvas frame node.') 3662 this.node = null 3663 } 3664 aboutToAppear(): void { 3665 this.context.on('onAttach', this.attachCallback.bind(this)) 3666 this.context.on('onDetach', this.detachCallback.bind(this)) 3667 } 3668 aboutToDisappear(): void { 3669 this.context.off('onAttach', this.attachCallback) 3670 this.context.off('onDetach', this.detachCallback) 3671 } 3672 3673 build() { 3674 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3675 Scroll(this.scroller) { 3676 Flex({ direction: FlexDirection.Column}) { 3677 ForEach(this.arr, (item: number) => { 3678 Row() { 3679 if (item == 3) { 3680 Canvas(this.context) 3681 .width('100%') 3682 .height(150) 3683 .backgroundColor('#ffff00') 3684 .onReady(() => { 3685 this.context.font = '30vp sans-serif' 3686 this.node?.commonEvent.setOnVisibleAreaApproximateChange( 3687 { ratios: [0, 1], expectedUpdateInterval: 10}, 3688 (isVisible: boolean, currentRatio: number) => { 3689 if (!isVisible && currentRatio <= 0.0) { 3690 console.info('Canvas is completely invisible.') 3691 } 3692 if (isVisible && currentRatio >= 1.0) { 3693 console.info('Canvas is fully visible.') 3694 } 3695 } 3696 ) 3697 }) 3698 } else { 3699 Text(item.toString()) 3700 .width('100%') 3701 .height(150) 3702 .backgroundColor(Color.Blue) 3703 .borderRadius(15) 3704 .fontSize(16) 3705 .textAlign(TextAlign.Center) 3706 .margin({ top: 5 }) 3707 } 3708 } 3709 }, (item: number) => item.toString()) 3710 } 3711 } 3712 .width('90%') 3713 .scrollBar(BarState.Off) 3714 .scrollable(ScrollDirection.Vertical) 3715 } 3716 .width('100%') 3717 .height('100%') 3718 } 3719} 3720``` 3721 3722### startImageAnalyzer<sup>12+</sup> 3723 3724startImageAnalyzer(config: ImageAnalyzerConfig): Promise\<void> 3725 3726配置AI分析并启动AI分析功能，使用前需先[使能](ts-components-canvas-canvas.md#enableanalyzer12)图像AI分析能力。<br>该方法调用时，将截取调用时刻的画面帧进行分析，使用时需注意启动分析的时机，避免出现画面和分析内容不一致的情况。<br>未执行完重复调用该方法会触发错误回调。示例代码同stopImageAnalyzer。 3727 3728> **说明：** 3729> 3730> 分析类型不支持动态修改。 3731> 当检测到画面有变化时，分析结果将自动销毁，可重新调用本接口启动分析。 3732> 该特性依赖设备能力，不支持该能力的情况下，将返回错误码。 3733 3734**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3735 3736**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3737 3738**参数：** 3739 3740| 参数名 | 类型 | 必填 | 说明 | 3741| ------ | --------- | ---- | ---------------------------------------------------------------------- | 3742| config | [ImageAnalyzerConfig](ts-image-common.md#imageanalyzerconfig) | 是 | 执行AI分析所需要的入参，用于配置AI分析功能。 | 3743 3744**返回值：** 3745 3746| 类型 | 说明 | 3747| ----------------- | ------------------------------------ | 3748| Promise\<void> | Promise对象，用于获取AI分析是否成功执行。 | 3749 3750**错误码：** 3751 3752以下错误码的详细介绍请参见[AI分析类库错误码](../errorcode-image-analyzer.md)。 3753 3754| 错误码ID | 错误信息 | 3755| -------- | -------------------------------------------- | 3756| 110001 | AI analysis is unsupported. | 3757| 110002 | AI analysis is ongoing. | 3758 3759### stopImageAnalyzer<sup>12+</sup> 3760 3761stopImageAnalyzer(): void 3762 3763停止AI分析功能，AI分析展示的内容将被销毁。 3764 3765> **说明：** 3766> 3767> 在startImageAnalyzer方法未返回结果时调用本方法，会触发其错误回调。 3768> 该特性依赖设备能力。 3769 3770**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 3771 3772**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3773 3774**示例：** 3775 3776```ts 3777// xxx.ets 3778import { BusinessError } from '@kit.BasicServicesKit'; 3779 3780@Entry 3781@Component 3782struct ImageAnalyzerExample { 3783 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3784 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3785 private config: ImageAnalyzerConfig = { 3786 types: [ImageAnalyzerType.SUBJECT, ImageAnalyzerType.TEXT] 3787 } 3788 private img = new ImageBitmap('page/common/test.jpg') 3789 private aiController: ImageAnalyzerController = new ImageAnalyzerController() 3790 private options: ImageAIOptions = { 3791 types: [ImageAnalyzerType.SUBJECT, ImageAnalyzerType.TEXT], 3792 aiController: this.aiController 3793 } 3794 3795 build() { 3796 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3797 Button('start') 3798 .width(80) 3799 .height(80) 3800 .onClick(() => { 3801 this.context.startImageAnalyzer(this.config) 3802 .then(() => { 3803 console.log("analysis complete") 3804 }) 3805 .catch((error: BusinessError) => { 3806 console.log("error code: " + error.code) 3807 }) 3808 }) 3809 Button('stop') 3810 .width(80) 3811 .height(80) 3812 .onClick(() => { 3813 this.context.stopImageAnalyzer() 3814 }) 3815 Button('getTypes') 3816 .width(80) 3817 .height(80) 3818 .onClick(() => { 3819 this.aiController.getImageAnalyzerSupportTypes() 3820 }) 3821 Canvas(this.context, this.options) 3822 .width(200) 3823 .height(200) 3824 .enableAnalyzer(true) 3825 .onReady(() => { 3826 this.context.drawImage(this.img, 0, 0, 200, 200) 3827 }) 3828 } 3829 .width('100%') 3830 .height('100%') 3831 } 3832} 3833``` 3834 3835## CanvasDirection 3836 3837**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3838 3839**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3840 3841**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3842 3843| 类型 | 说明 | 3844| ------- | ------------------- | 3845| inherit | 继承canvas组件通用属性已设定的文本方向。 | 3846| ltr | 从左往右。 | 3847| rtl | 从右往左。 | 3848 3849## CanvasFillRule 3850 3851**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3852 3853**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3854 3855**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3856 3857| 类型 | 说明 | 3858| ------- | ----- | 3859| evenodd | 奇偶规则。 | 3860| nonzero | 非零规则。 | 3861 3862## CanvasLineCap 3863 3864**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3865 3866**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3867 3868**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3869 3870| 类型 | 说明 | 3871| ------ | ----------------------------- | 3872| butt | 线条两端为平行线，不额外扩展。 | 3873| round | 在线条两端延伸半个圆，直径等于线宽。 | 3874| square | 在线条两端延伸一个矩形，宽度等于线宽的一半，高度等于线宽。 | 3875 3876## CanvasLineJoin 3877 3878**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3879 3880**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3881 3882**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3883 3884| 类型 | 说明 | 3885| ----- | ---------------------------------------- | 3886| bevel | 在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。 | 3887| miter | 在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。 | 3888| round | 在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。 | 3889 3890## CanvasTextAlign 3891 3892**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3893 3894**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3895 3896**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3897 3898| 类型 | 说明 | 3899| ------ | ------------ | 3900| center | 文本居中对齐。 | 3901| start | 文本对齐界线开始的地方。 | 3902| end | 文本对齐界线结束的地方。 | 3903| left | 文本左对齐。 | 3904| right | 文本右对齐。 | 3905 3906## CanvasTextBaseline 3907 3908**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3909 3910**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3911 3912**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3913 3914| 类型 | 说明 | 3915| ----------- | ---------------------------------------- | 3916| alphabetic | 文本基线是标准的字母基线。 | 3917| bottom | 文本基线在文本块的底部。 与ideographic基线的区别在于ideographic基线不需要考虑下行字母。 | 3918| hanging | 文本基线是悬挂基线。 | 3919| ideographic | 文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。 | 3920| middle | 文本基线在文本块的中间。 | 3921| top | 文本基线在文本块的顶部。 | 3922 3923## ImageSmoothingQuality 3924 3925**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3926 3927**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3928 3929**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3930 3931| 类型 | 说明 | 3932| ------ | ---- | 3933| low | 低画质 | 3934| medium | 中画质 | 3935| high | 高画质 | 3936 3937## TextMetrics 3938 3939**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3940 3941**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3942 3943**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3944 3945| 名称 | 类型 | 只读 | 可选 | 说明 | 3946| ---------- | -------------- | ------ | ---------------- | ------------------------ | 3947| width | number | 是 | 否 | 只读属性，文本方块的宽度。 | 3948| height | number | 是 | 否 | 只读属性，文本方块的高度。 | 3949| actualBoundingBoxAscent | number | 是 | 否 | 只读属性，从[CanvasRenderingContext2D.textBaseline](#canvastextbaseline)属性标明的水平线到渲染文本的矩形边界顶部的距离。 | 3950| actualBoundingBoxDescent | number | 是 | 否 | 只读属性，从[CanvasRenderingContext2D.textBaseline](#canvastextbaseline)属性标明的水平线到渲染文本的矩形边界底部的距离。 | 3951| actualBoundingBoxLeft | number | 是 | 否 | 只读属性，平行于基线，从[CanvasRenderingContext2D.textAlign](#canvastextalign)属性确定的对齐点到文本矩形边界左侧的距离。 | 3952| actualBoundingBoxRight | number | 是 | 否 | 只读属性，平行于基线，从[CanvasRenderingContext2D.textAlign](#canvastextalign)属性确定的对齐点到文本矩形边界右侧的距离。 | 3953| alphabeticBaseline | number | 是 | 否 | 只读属性，从[CanvasRenderingContext2D.textBaseline](#canvastextbaseline)属性标明的水平线到线框的 alphabetic 基线的距离。 | 3954| emHeightAscent | number | 是 | 否 | 只读属性，从[CanvasRenderingContext2D.textBaseline](#canvastextbaseline)属性标明的水平线到线框中 em 方块顶部的距离。 | 3955| emHeightDescent | number | 是 | 否 | 只读属性，从[CanvasRenderingContext2D.textBaseline](#canvastextbaseline)属性标明的水平线到线框中 em 方块底部的距离。 | 3956| fontBoundingBoxAscent | number | 是 | 否 | 只读属性，从[CanvasRenderingContext2D.textBaseline](#canvastextbaseline)属性标明的水平线到渲染文本的所有字体的矩形最高边界顶部的距离。 | 3957| fontBoundingBoxDescent | number | 是 | 否 | 只读属性，从[CanvasRenderingContext2D.textBaseline](#canvastextbaseline)属性标明的水平线到渲染文本的所有字体的矩形边界最底部的距离。 | 3958| hangingBaseline | number | 是 | 否 | 只读属性，从[CanvasRenderingContext2D.textBaseline](#canvastextbaseline)属性标明的水平线到线框的 hanging 基线的距离。 | 3959| ideographicBaseline | number | 是 | 否 | 只读属性，从[CanvasRenderingContext2D.textBaseline](#canvastextbaseline)属性标明的水平线到线框的 ideographic 基线的距离。 |
