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