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