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