ts-canvasrenderingcontext2d.md 74.3 KB
Newer Older
Z
zengyawen 已提交
1 2 3
# CanvasRenderingContext2D


4
> **NOTE**<br>
Z
zengyawen 已提交
5 6 7
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.


8
The **\<RenderingContext>** component is used to draw rectangles, text, images, and other objects on a canvas.
Z
zengyawen 已提交
9 10 11 12 13 14 15


## APIs

CanvasRenderingContext2D(setting: RenderingContextSetting)

- Parameters
H
HelloCrease 已提交
16 17
    | Name    | Type                                     | Mandatory | Default Value | Description                   |
    | ------- | ---------------------------------------- | --------- | ------------- | ----------------------------- |
18
    | setting | [RenderingContextSettings](#renderingcontextsettings) | Yes       | -             | See [RenderingContextSettings](#renderingcontextsettings). |
Z
zengyawen 已提交
19 20 21 22


### RenderingContextSettings

23
RenderingContextSettings(antialias?: boolean)
Z
zengyawen 已提交
24 25 26 27

Configures the settings of a **CanvasRenderingContext2D** object, including whether to enable antialiasing.

- Parameters
H
HelloCrease 已提交
28 29
    | Name      | Type | Mandatory | Default Value | Description                      |
    | --------- | ---- | --------- | ------------- | -------------------------------- |
30
    | antialias | boolean | No        | false         | Whether antialiasing is enabled. |
Z
zengyawen 已提交
31 32 33 34


## Attributes

H
HelloCrease 已提交
35 36
| Name                                     | Type                                     | Default Value                   | Description                              |
| ---------------------------------------- | ---------------------------------------- | ------------------------------- | ---------------------------------------- |
37
| [fillStyle](#fillstyle)                  | &lt;color&gt; \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | -                               | Style used to fill an area.<br>- When the type is **&lt;color&gt;**, this attribute indicates the fill color.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. |
H
HelloCrease 已提交
38
| [lineWidth](#linewidth)                  | number                                   | -                               | Line width.                              |
39 40 41
| [strokeStyle](#strokestyle)              | &lt;color&gt; \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | -                               | Stroke style.<br>- When the type is **&lt;color&gt;**, this attribute indicates the stroke color.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. |
| [lineCap](#linecap)                      | string                                   | 'butt'                          | Style of the line endpoints. The options are as follows:<br>- **'butt'**: The endpoints of the line are squared off.<br>- **'round'**: The endpoints of the line are rounded.<br>- **'square'**: The endpoints of the line are squared off by adding a box with an equal width and half the height of the line's thickness. |
| [lineJoin](#linejoin)                    | string                                   | 'miter'                         | Style of the shape used to join line segments. The options are as follows:<br>- **'round'**: The shape used to join line segments is a rounded corner with the radius equal to the line width.<br>- **'bevel'**: The shape used to join line segments is a beveled corner. The rectangular corner of each line is independent.<br>- **'miter'**: The shape used to join line segments is a mitered corner. The corner is formed by extending the outside edges of the lines until they meet. You can adjust the effect of this attribute using **miterLimit**. |
H
HelloCrease 已提交
42
| [miterLimit](#miterlimit)                | number                                   | 10                              | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet. |
43 44 45
| [font](#font)                            | string                                   | 'normal normal 14px sans-serif' | Font style.<br>Syntax: ctx.font='font-size font-family'<br>- (Optional) **font-size**: font size and row height. The unit can only be px.<br>- (Optional) **font-family**: font family.<br>Syntax: ctx.font='font-style font-weight font-size font-family'<br>- (Optional) **font-style**: font style. Available values are **'normal'** and **'italic'**.<br>- (Optional) **font-weight**: font weight. Available values are as follows: **'normal'**, **'bold'**, **'bolder'**, **'lighter'**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**<br>- (Optional) **font-size**: font size and row height. The unit can only be px.<br>- (Optional) **font-family**: font family. Available values are **'sans-serif'**, **'serif'**, and **'monospace'**. |
| [textAlign](#textalign)                  | string                                   | 'left'                          | Text alignment mode. Available values are as follows:<br>- **'left'**: The text is left-aligned.<br>- **'right'**: The text is right-aligned.<br>- **'center'**: The text is center-aligned.<br>- **'start'**: The text is aligned with the start bound.<br>- **'end'**: The text is aligned with the end bound.<br>**NOTE**<br>In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**. |
| [textBaseline](#textbaseline)            | string                                   | 'alphabetic'                    | Horizontal alignment mode of text. Available values are as follows:<br>- **'alphabetic'**: The text baseline is the normal alphabetic baseline.<br>- **'top'**: The text baseline is on the top of the text bounding box.<br>- **'hanging'**: The text baseline is a hanging baseline over the text.<br>- **'middle'**: The text baseline is in the middle of the text bounding box.<br>- **'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.<br>- **'bottom'**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line. |
H
HelloCrease 已提交
46 47 48 49 50 51 52 53 54
| [globalAlpha](#globalalpha)              | number                                   | -                               | Opacity. **0.0**: completely transparent; **1.0**: completely opaque. |
| [lineDashOffset](#linedashoffset)        | number                                   | 0.0                             | Offset of the dashed line. The precision is float. |
| [globalCompositeOperation](#globalcompositeoperation) | string                                   | 'source-over'                   | Composition operation type. Available values are as follows: **'source-over'**, **'source-atop'**, **'source-in'**, **'source-out'**, **'destination-over'**, **'destination-atop'**, **'destination-in'**, **'destination-out'**, **'lighter'**, **'copy'**, and **'xor'**. |
| [shadowBlur](#shadowblur)                | number                                   | 0.0                             | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float. |
| [shadowColor](#shadowcolor)              | &lt;color&gt;                            | -                               | Shadow color.                            |
| [shadowOffsetX](#shadowoffsetx)          | number                                   | -                               | X-axis shadow offset relative to the original object. |
| [shadowOffsetY](#shadowoffsety)          | number                                   | -                               | Y-axis shadow offset relative to the original object. |
| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean                                  | true                            | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite. |
| imageSmoothingQuality                    | string                                   | 'low'                           | Image smoothness. The value can be **'low'**, **'medium'**, or **'high'**. |
E
esterzhou 已提交
55

56
> **NOTE**<br>
Z
zengyawen 已提交
57 58 59 60 61
> The value of the **&lt;color&gt;** type can be in 'rgb(255, 255, 255)', 'rgba(255, 255, 255, 1.0)', or '\#FFFFFF' format.


### fillStyle

62 63
```ts
// xxx.ets
Z
zengyawen 已提交
64 65 66
@Entry
@Component
struct FillStyleExample {
E
ester.zhou 已提交
67
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
Z
zengyawen 已提交
68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.context.fillStyle = '#0000ff'
          this.context.fillRect(20, 160, 150, 100)
        })
    }
    .width('100%')
    .height('100%')
  }
}
```

Z
zengyawen 已提交
87 88 89 90
![en-us_image_0000001257058395](figures/en-us_image_0000001257058395.png)


### lineWidth
Z
zengyawen 已提交
91

92 93
```ts
// xxx.ets
Z
zengyawen 已提交
94 95 96
@Entry
@Component
struct LineWidthExample {
E
ester.zhou 已提交
97
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
Z
zengyawen 已提交
98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
        this.context.lineWidth = 5
        this.context.strokeRect(25, 25, 85, 105)
      })
    }
    .width('100%')
    .height('100%')
  }
}
```

Z
zengyawen 已提交
117 118 119 120
![en-us_image_0000001212378408](figures/en-us_image_0000001212378408.png)


### strokeStyle
Z
zengyawen 已提交
121

122 123
```ts
// xxx.ets
Z
zengyawen 已提交
124 125 126
@Entry
@Component
struct StrokeStyleExample {
E
ester.zhou 已提交
127
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
Z
zengyawen 已提交
128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.context.lineWidth = 10
          this.context.strokeStyle = '#0000ff'
          this.context.strokeRect(25, 25, 155, 105)
        })
    }
    .width('100%')
    .height('100%')
  }
}
```


Z
zengyawen 已提交
149 150 151 152 153
![en-us_image_0000001212218446](figures/en-us_image_0000001212218446.png)


### lineCap

154 155
```ts
// xxx.ets
Z
zengyawen 已提交
156 157 158
@Entry
@Component
struct LineCapExample {
E
ester.zhou 已提交
159
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
Z
zengyawen 已提交
160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.context.lineWidth = 8
          this.context.beginPath()
          this.context.lineCap = 'round'
          this.context.moveTo(30, 50)
          this.context.lineTo(220, 50)
          this.context.stroke()
        })
    }
    .width('100%')
    .height('100%')
  }
}
```

Z
zengyawen 已提交
183 184 185 186
![en-us_image_0000001212378406](figures/en-us_image_0000001212378406.png)


### lineJoin
Z
zengyawen 已提交
187

188 189
```ts
// xxx.ets
Z
zengyawen 已提交
190 191 192
@Entry
@Component
struct LineJoinExample {
E
ester.zhou 已提交
193
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
Z
zengyawen 已提交
194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
        this.context.beginPath()
        this.context.lineWidth = 8
        this.context.lineJoin = 'miter'
        this.context.moveTo(30, 30)
        this.context.lineTo(120, 60)
        this.context.lineTo(30, 110)
        this.context.stroke()
      })
    }
    .width('100%')
    .height('100%')
  }
}
```

Z
zengyawen 已提交
218 219 220 221
![en-us_image_0000001212218438](figures/en-us_image_0000001212218438.png)


### miterLimit
Z
zengyawen 已提交
222

223 224
```ts
// xxx.ets
Z
zengyawen 已提交
225 226 227
@Entry
@Component
struct MiterLimit {
E
ester.zhou 已提交
228
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
Z
zengyawen 已提交
229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.context.lineWidth = 8
          this.context.lineJoin = 'miter'
          this.context.miterLimit = 3
          this.context.moveTo(30, 30)
          this.context.lineTo(60, 35)
          this.context.lineTo(30, 37)
          this.context.stroke()
      })
    }
    .width('100%')
    .height('100%')
  }
}
```

Z
zengyawen 已提交
253 254 255 256
![en-us_image_0000001212378398](figures/en-us_image_0000001212378398.png)


### font
Z
zengyawen 已提交
257

258 259
```ts
// xxx.ets
Z
zengyawen 已提交
260 261 262
@Entry
@Component
struct Font {
E
ester.zhou 已提交
263
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
Z
zengyawen 已提交
264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.context.font = '30px sans-serif'
          this.context.fillText("Hello World", 20, 60)
      })
    }
    .width('100%')
    .height('100%')
  }
}
```

Z
zengyawen 已提交
283 284 285 286
![en-us_image_0000001257058409](figures/en-us_image_0000001257058409.png)


### textAlign
Z
zengyawen 已提交
287

288 289
```ts
// xxx.ets
Z
zengyawen 已提交
290 291
@Entry
@Component
E
ester.zhou 已提交
292 293
struct CanvasExample {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
Z
zengyawen 已提交
294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
        this.context.strokeStyle = '#0000ff'
        this.context.moveTo(140, 10)
        this.context.lineTo(140, 160)
        this.context.stroke()

        this.context.font = '18px sans-serif'

        this.context.textAlign = 'start'
        this.context.fillText('textAlign=start', 140, 60)
        this.context.textAlign = 'end'
        this.context.fillText('textAlign=end', 140, 80)
        this.context.textAlign = 'left'
        this.context.fillText('textAlign=left', 140, 100)
        this.context.textAlign = 'center'
        this.context.fillText('textAlign=center',140, 120)
        this.context.textAlign = 'right'
        this.context.fillText('textAlign=right',140, 140)
      })
    }
    .width('100%')
    .height('100%')
  }
}
```

Z
zengyawen 已提交
328 329 330 331
![en-us_image_0000001256978351](figures/en-us_image_0000001256978351.png)


### textBaseline
Z
zengyawen 已提交
332

333 334
```ts
// xxx.ets
Z
zengyawen 已提交
335 336 337
@Entry
@Component
struct TextBaseline {
E
ester.zhou 已提交
338
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
Z
zengyawen 已提交
339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.context.strokeStyle = '#0000ff'
          this.context.moveTo(0, 120)
          this.context.lineTo(400, 120)
          this.context.stroke()

          this.context.font = '20px sans-serif'

          this.context.textBaseline = 'top'
          this.context.fillText('Top', 10, 120)
          this.context.textBaseline = 'bottom'
          this.context.fillText('Bottom', 55, 120)
          this.context.textBaseline = 'middle'
          this.context.fillText('Middle', 125, 120)
          this.context.textBaseline = 'alphabetic'
          this.context.fillText('Alphabetic', 195, 120)
          this.context.textBaseline = 'hanging'
          this.context.fillText('Hanging', 295, 120)
      })
    }
    .width('100%')
    .height('100%')
  }
}
```

Z
zengyawen 已提交
373 374 375 376
![en-us_image_0000001212058462](figures/en-us_image_0000001212058462.png)


### globalAlpha
Z
zengyawen 已提交
377

378 379
```ts
// xxx.ets
Z
zengyawen 已提交
380 381 382
@Entry
@Component
struct GlobalAlpha {
E
ester.zhou 已提交
383
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
Z
zengyawen 已提交
384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
        this.context.fillStyle = 'rgb(255,0,0)'
        this.context.fillRect(0, 0, 50, 50)
        this.context.globalAlpha = 0.4
        this.context.fillStyle = 'rgb(0,0,255)'
        this.context.fillRect(50, 50, 50, 50)
      })
    }
    .width('100%')
    .height('100%')
  }
}
```

Z
zengyawen 已提交
406 407 408 409
![en-us_image_0000001212218444](figures/en-us_image_0000001212218444.png)


### lineDashOffset
Z
zengyawen 已提交
410

411 412
```ts
// xxx.ets
Z
zengyawen 已提交
413 414 415
@Entry
@Component
struct LineDashOffset {
E
ester.zhou 已提交
416
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
Z
zengyawen 已提交
417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.context.arc(100, 75, 50, 0, 6.28)
          this.context.setLineDash([10,20])
          this.context.stroke();
      })
    }
    .width('100%')
    .height('100%')
  }
}
```

Z
zengyawen 已提交
437 438 439 440 441
![en-us_image_0000001212058480](figures/en-us_image_0000001212058480.png)


### globalCompositeOperation

H
HelloCrease 已提交
442 443 444 445 446 447
| Name             | Description                              |
| ---------------- | ---------------------------------------- |
| source-over      | Displays the new drawing above the existing drawing. This attribute is used by default. |
| source-atop      | Displays the new drawing on the top of the existing drawing. |
| source-in        | Displays the new drawing inside the existing drawing. |
| source-out       | Displays the part of the new drawing that is outside of the existing drawing. |
E
esterzhou 已提交
448 449
| destination-over | Displays the existing drawing above the new drawing. |
| destination-atop | Displays the existing drawing on the top of the new drawing. |
H
HelloCrease 已提交
450 451 452 453 454
| destination-in   | Displays the existing drawing inside the new drawing. |
| destination-out  | Displays the part of the existing drawing that is outside of the new drawing. |
| lighter          | Displays both the new drawing and the existing drawing. |
| copy             | Displays the new drawing and neglects the existing drawing. |
| xor              | Combines the new drawing and existing drawing using the XOR operation. |
Z
zengyawen 已提交
455

456 457
```ts
// xxx.ets
Z
zengyawen 已提交
458 459 460
@Entry
@Component
struct GlobalCompositeOperation {
E
ester.zhou 已提交
461
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
Z
zengyawen 已提交
462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.context.fillStyle = 'rgb(255,0,0)'
          this.context.fillRect(20, 20, 50, 50)
          this.context.globalCompositeOperation = 'source-over'
          this.context.fillStyle = 'rgb(0,0,255)'
          this.context.fillRect(50, 50, 50, 50)
          this.context.fillStyle = 'rgb(255,0,0)'
          this.context.fillRect(120, 20, 50, 50)
          this.context.globalCompositeOperation = 'destination-over'
          this.context.fillStyle = 'rgb(0,0,255)'
          this.context.fillRect(150, 50, 50, 50)
      })
    }
    .width('100%')
    .height('100%')
  }
}
```

Z
zengyawen 已提交
489 490 491 492
![en-us_image_0000001211898480](figures/en-us_image_0000001211898480.png)


### shadowBlur
Z
zengyawen 已提交
493

494 495
```ts
// xxx.ets
Z
zengyawen 已提交
496 497 498
@Entry
@Component
struct ShadowBlur {
E
ester.zhou 已提交
499
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
Z
zengyawen 已提交
500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
  
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.context.shadowBlur = 30
          this.context.shadowColor = 'rgb(0,0,0)'
          this.context.fillStyle = 'rgb(255,0,0)'
          this.context.fillRect(20, 20, 100, 80)
      })
    }
    .width('100%')
    .height('100%')
  }
}
```

Z
zengyawen 已提交
521 522 523 524
![en-us_image_0000001256978343](figures/en-us_image_0000001256978343.png)


### shadowColor
Z
zengyawen 已提交
525

526 527
```ts
// xxx.ets
Z
zengyawen 已提交
528 529 530
@Entry
@Component
struct ShadowColor {
E
ester.zhou 已提交
531
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
Z
zengyawen 已提交
532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.context.shadowBlur = 30
          this.context.shadowColor = 'rgb(0,0,255)'
          this.context.fillStyle = 'rgb(255,0,0)'
          this.context.fillRect(30, 30, 100, 100)
      })
    }
    .width('100%')
    .height('100%')
  }
}
```

Z
zengyawen 已提交
553 554 555 556
![en-us_image_0000001257138353](figures/en-us_image_0000001257138353.png)


### shadowOffsetX
Z
zengyawen 已提交
557

558 559
```ts
// xxx.ets
Z
zengyawen 已提交
560 561 562
@Entry
@Component
struct ShadowOffsetX {
E
ester.zhou 已提交
563
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
Z
zengyawen 已提交
564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.context.shadowBlur = 10
          this.context.shadowOffsetX = 20
          this.context.shadowColor = 'rgb(0,0,0)'
          this.context.fillStyle = 'rgb(255,0,0)'
          this.context.fillRect(20, 20, 100, 80)
      })
    }
    .width('100%')
    .height('100%')
  }
}
```

Z
zengyawen 已提交
586 587 588 589
![en-us_image_0000001212218436](figures/en-us_image_0000001212218436.png)


### shadowOffsetY
Z
zengyawen 已提交
590

591 592
```ts
// xxx.ets
Z
zengyawen 已提交
593 594 595
@Entry
@Component
struct ShadowOffsetY {
E
ester.zhou 已提交
596
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
Z
zengyawen 已提交
597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.context.shadowBlur = 10
          this.context.shadowOffsetY = 20
          this.context.shadowColor = 'rgb(0,0,0)'
          this.context.fillStyle = 'rgb(255,0,0)'
          this.context.fillRect(30, 30, 100, 100)
      })
    }
    .width('100%')
    .height('100%')
  }
}
```

Z
zengyawen 已提交
618 619 620 621
![en-us_image_0000001212378410](figures/en-us_image_0000001212378410.png)


### imageSmoothingEnabled
Z
zengyawen 已提交
622

623 624
```ts
// xxx.ets
Z
zengyawen 已提交
625 626 627
@Entry
@Component
struct ImageSmoothingEnabled {
E
ester.zhou 已提交
628
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
Z
zengyawen 已提交
629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
  
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.context.imageSmoothingEnabled = false
          this.context.drawImage( this.img,0,0,400,200)
      })
    }
    .width('100%')
    .height('100%')
  }
}
```

Z
zengyawen 已提交
649
![en-us_image_0000001211898472](figures/en-us_image_0000001211898472.png)
Z
zengyawen 已提交
650 651


Z
zengyawen 已提交
652
## Methods
Z
zengyawen 已提交
653

Z
zengyawen 已提交
654 655 656 657

### fillRect

fillRect(x: number, y: number, w: number, h: number): void
Z
zengyawen 已提交
658 659 660

Fills a rectangle on the canvas.

Z
zengyawen 已提交
661
- Parameters
H
HelloCrease 已提交
662 663 664 665 666 667
    | Name   | Type   | Mandatory | Default Value | Description                              |
    | ------ | ------ | --------- | ------------- | ---------------------------------------- |
    | x      | number | Yes       | 0             | X-coordinate of the upper left corner of the rectangle. |
    | y      | number | Yes       | 0             | Y-coordinate of the upper left corner of the rectangle. |
    | width  | number | Yes       | 0             | Width of the rectangle.                  |
    | height | number | Yes       | 0             | Height of the rectangle.                 |
Z
zengyawen 已提交
668 669

- Example
H
HelloCrease 已提交
670

671 672
  ```ts
  // xxx.ets
Z
zengyawen 已提交
673 674 675 676 677 678 679 680 681 682 683 684 685 686 687
  @Entry
  @Component
  struct FillRect {
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
    
    build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{
            this.context.fillRect(0,30,100,100)
         })
Z
zengyawen 已提交
688
        }
Z
zengyawen 已提交
689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704
      .width('100%')
      .height('100%')
    }
  }
  ```

  ![en-us_image_0000001212218440](figures/en-us_image_0000001212218440.png)


### strokeRect

strokeRect(x: number, y: number, w: number, h: number): void

Draws an outlined rectangle on the canvas.

- Parameters
H
HelloCrease 已提交
705 706 707 708 709 710
    | Name   | Type   | Mandatory | Default Value | Description                              |
    | ------ | ------ | --------- | ------------- | ---------------------------------------- |
    | x      | number | Yes       | 0             | X-coordinate of the upper left corner of the rectangle. |
    | y      | number | Yes       | 0             | Y-coordinate of the upper left corner of the rectangle. |
    | width  | number | Yes       | 0             | Width of the rectangle.                  |
    | height | number | Yes       | 0             | Height of the rectangle.                 |
Z
zengyawen 已提交
711 712

- Example
H
HelloCrease 已提交
713

714 715
  ```ts
  // xxx.ets
Z
zengyawen 已提交
716 717 718 719 720 721 722 723 724 725 726 727 728 729
  @Entry
  @Component
  struct StrokeRect {
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
    build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{
            this.context.strokeRect(30, 30, 200, 150)
        })
Z
zengyawen 已提交
730
      }
Z
zengyawen 已提交
731 732
      .width('100%')
      .height('100%')
Z
zengyawen 已提交
733
    }
Z
zengyawen 已提交
734 735
  }
  ```
Z
zengyawen 已提交
736

Z
zengyawen 已提交
737
  ![en-us_image_0000001257138359](figures/en-us_image_0000001257138359.png)
Z
zengyawen 已提交
738 739


Z
zengyawen 已提交
740
### clearRect
Z
zengyawen 已提交
741

Z
zengyawen 已提交
742
clearRect(x: number, y: number, w: number, h: number): void
Z
zengyawen 已提交
743 744 745

Clears the content in a rectangle on the canvas.

Z
zengyawen 已提交
746
- Parameters
H
HelloCrease 已提交
747 748 749 750 751 752
    | Name   | Type   | Mandatory | Default Value | Description                              |
    | ------ | ------ | --------- | ------------- | ---------------------------------------- |
    | x      | number | Yes       | 0             | X-coordinate of the upper left corner of the rectangle. |
    | y      | number | Yes       | 0             | Y-coordinate of the upper left corner of the rectangle. |
    | width  | number | Yes       | 0             | Width of the rectangle.                  |
    | height | number | Yes       | 0             | Height of the rectangle.                 |
Z
zengyawen 已提交
753 754

- Example
H
HelloCrease 已提交
755

756 757
  ```ts
  // xxx.ets
Z
zengyawen 已提交
758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773
  @Entry
  @Component
  struct ClearRect {
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
    build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{
            this.context.fillStyle = 'rgb(0,0,255)'
            this.context.fillRect(0,0,500,500)
            this.context.clearRect(20,20,150,100)
        })
Z
zengyawen 已提交
774
      }
Z
zengyawen 已提交
775 776
      .width('100%')
      .height('100%')
Z
zengyawen 已提交
777
    }
Z
zengyawen 已提交
778 779
  }
  ```
Z
zengyawen 已提交
780

Z
zengyawen 已提交
781
  ![en-us_image_0000001211898482](figures/en-us_image_0000001211898482.png)
Z
zengyawen 已提交
782 783


Z
zengyawen 已提交
784
### fillText
Z
zengyawen 已提交
785

Z
zengyawen 已提交
786
fillText(text: string, x: number, y: number): void
Z
zengyawen 已提交
787 788 789

Draws filled text on the canvas.

Z
zengyawen 已提交
790
- Parameters
H
HelloCrease 已提交
791 792 793 794 795
    | Name | Type   | Mandatory | Default Value | Description                              |
    | ---- | ------ | --------- | ------------- | ---------------------------------------- |
    | text | string | Yes       | ""            | Text to draw.                            |
    | x    | number | Yes       | 0             | X-coordinate of the lower left corner of the text. |
    | y    | number | Yes       | 0             | Y-coordinate of the lower left corner of the text. |
Z
zengyawen 已提交
796 797

- Example
H
HelloCrease 已提交
798

799 800
  ```ts
  // xxx.ets
Z
zengyawen 已提交
801 802 803 804 805 806 807 808 809 810 811 812 813 814 815
  @Entry
  @Component
  struct FillText {
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
    build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{
            this.context.font = '30px sans-serif'
            this.context.fillText("Hello World!", 20, 100)
        })
Z
zengyawen 已提交
816
      }
Z
zengyawen 已提交
817 818
      .width('100%')
      .height('100%')
Z
zengyawen 已提交
819
    }
Z
zengyawen 已提交
820 821
  }
  ```
Z
zengyawen 已提交
822

Z
zengyawen 已提交
823
  ![en-us_image_0000001257058399](figures/en-us_image_0000001257058399.png)
Z
zengyawen 已提交
824 825


Z
zengyawen 已提交
826
### strokeText
Z
zengyawen 已提交
827

Z
zengyawen 已提交
828
strokeText(text: string, x: number, y: number): void
Z
zengyawen 已提交
829 830 831

Draws a text stroke on the canvas.

Z
zengyawen 已提交
832
- Parameters
H
HelloCrease 已提交
833 834 835 836 837
    | Name | Type   | Mandatory | Default Value | Description                              |
    | ---- | ------ | --------- | ------------- | ---------------------------------------- |
    | text | string | Yes       | ""            | Text to draw.                            |
    | x    | number | Yes       | 0             | X-coordinate of the lower left corner of the text. |
    | y    | number | Yes       | 0             | Y-coordinate of the lower left corner of the text. |
Z
zengyawen 已提交
838 839

- Example
H
HelloCrease 已提交
840

841 842
  ```ts
  // xxx.ets
Z
zengyawen 已提交
843 844 845 846 847 848 849 850 851 852 853 854 855 856 857
  @Entry
  @Component
  struct StrokeText {
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
    build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{
            this.context.font = '55px sans-serif'
            this.context.strokeText("Hello World!", 20, 60)
        })
Z
zengyawen 已提交
858
      }
Z
zengyawen 已提交
859 860
      .width('100%')
      .height('100%')
Z
zengyawen 已提交
861
    }
Z
zengyawen 已提交
862 863 864 865 866 867 868 869 870 871 872 873 874
  }
  ```

  ![en-us_image_0000001256978349](figures/en-us_image_0000001256978349.png)


### measureText

measureText(text: string): TextMetrics

Returns a **TextMetrics** object used to obtain the width of specified text.

- Parameters
H
HelloCrease 已提交
875 876 877
    | Name | Type   | Mandatory | Default Value | Description          |
    | ---- | ------ | --------- | ------------- | -------------------- |
    | text | string | Yes       | ""            | Text to be measured. |
Z
zengyawen 已提交
878 879

- Return value
H
HelloCrease 已提交
880 881 882
    | Type        | Description             |
    | ----------- | ----------------------- |
    | TextMetrics | **TextMetrics** object. |
Z
zengyawen 已提交
883 884

- **TextMetrics** attributes
H
HelloCrease 已提交
885 886 887
    | Name  | Type   | Description        |
    | ----- | ------ | ------------------ |
    | width | number | Width of the text. |
Z
zengyawen 已提交
888 889

- Example
H
HelloCrease 已提交
890

891 892
  ```ts
  // xxx.ets
Z
zengyawen 已提交
893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908
  @Entry
  @Component
  struct MeasureText {
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
    build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{
            this.context.font = '50px sans-serif'
            this.context.fillText("Hello World!", 20, 100)
            this.context.fillText("width:" + this.context.measureText("Hello World!").width, 20, 200)
        })
Z
zengyawen 已提交
909
      }
Z
zengyawen 已提交
910 911
      .width('100%')
      .height('100%')
Z
zengyawen 已提交
912
    }
Z
zengyawen 已提交
913 914
  }
  ```
Z
zengyawen 已提交
915

Z
zengyawen 已提交
916
  ![en-us_image_0000001257138343](figures/en-us_image_0000001257138343.png)
Z
zengyawen 已提交
917 918


Z
zengyawen 已提交
919
### stroke
Z
zengyawen 已提交
920

Z
zengyawen 已提交
921
stroke(path?: Path2D): void
Z
zengyawen 已提交
922 923 924

Strokes a path.

Z
zengyawen 已提交
925
- Parameters
H
HelloCrease 已提交
926 927 928
    | Name | Type                                     | Mandatory | Default Value | Description                |
    | ---- | ---------------------------------------- | --------- | ------------- | -------------------------- |
    | path | [Path2D](ts-components-canvas-path2d.md) | No        | null          | A **Path2D** path to draw. |
Z
zengyawen 已提交
929 930

- Example
H
HelloCrease 已提交
931

932 933
  ```ts
  // xxx.ets
Z
zengyawen 已提交
934 935 936 937 938
  @Entry
  @Component
  struct Stroke {
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
H
HelloCrease 已提交
939

Z
zengyawen 已提交
940 941 942 943 944 945 946 947 948 949 950 951
    build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{
            this.context.moveTo(25, 25)
            this.context.lineTo(25, 105)
            this.context.strokeStyle = 'rgb(0,0,255)'
            this.context.stroke()
          })
Z
zengyawen 已提交
952
      }
Z
zengyawen 已提交
953 954
      .width('100%')
      .height('100%')
Z
zengyawen 已提交
955
    }
Z
zengyawen 已提交
956 957
  }
  ```
Z
zengyawen 已提交
958

Z
zengyawen 已提交
959
  ![en-us_image_0000001257058411](figures/en-us_image_0000001257058411.png)
Z
zengyawen 已提交
960 961


Z
zengyawen 已提交
962
### beginPath
Z
zengyawen 已提交
963

Z
zengyawen 已提交
964
beginPath(): void
Z
zengyawen 已提交
965 966 967

Creates a drawing path.

Z
zengyawen 已提交
968
- Example
H
HelloCrease 已提交
969

970 971
  ```ts
  // xxx.ets
Z
zengyawen 已提交
972 973 974 975 976
  @Entry
  @Component
  struct BeginPath {
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
H
HelloCrease 已提交
977

Z
zengyawen 已提交
978 979 980 981 982 983 984 985 986 987 988 989 990 991
    build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{
            this.context.beginPath()
            this.context.lineWidth = 6
            this.context.strokeStyle = '#0000ff'
            this.context.moveTo(15, 80)
            this.context.lineTo(280, 160)
            this.context.stroke()
          })
Z
zengyawen 已提交
992
      }
Z
zengyawen 已提交
993 994
      .width('100%')
      .height('100%')
Z
zengyawen 已提交
995
    }
Z
zengyawen 已提交
996 997
  }
  ```
Z
zengyawen 已提交
998

Z
zengyawen 已提交
999
  ![en-us_image_0000001212058478](figures/en-us_image_0000001212058478.png)
Z
zengyawen 已提交
1000 1001


Z
zengyawen 已提交
1002
### moveTo
Z
zengyawen 已提交
1003

Z
zengyawen 已提交
1004
moveTo(x: number, y: number): void
Z
zengyawen 已提交
1005 1006 1007

Moves a drawing path to a target position on the canvas.

Z
zengyawen 已提交
1008
- Parameters
H
HelloCrease 已提交
1009 1010 1011 1012
    | Name | Type   | Mandatory | Default Value | Description                          |
    | ---- | ------ | --------- | ------------- | ------------------------------------ |
    | x    | number | Yes       | 0             | X-coordinate of the target position. |
    | y    | number | Yes       | 0             | Y-coordinate of the target position. |
Z
zengyawen 已提交
1013 1014

- Example
H
HelloCrease 已提交
1015

1016 1017
  ```ts
  // xxx.ets
Z
zengyawen 已提交
1018 1019 1020 1021 1022
  @Entry
  @Component
  struct MoveTo {
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
H
HelloCrease 已提交
1023

Z
zengyawen 已提交
1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035
    build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{
            this.context.beginPath()
            this.context.moveTo(10, 10)
            this.context.lineTo(280, 160)
            this.context.stroke()
          })
Z
zengyawen 已提交
1036
      }
Z
zengyawen 已提交
1037 1038
      .width('100%')
      .height('100%')
Z
zengyawen 已提交
1039
    }
Z
zengyawen 已提交
1040 1041
  }
  ```
Z
zengyawen 已提交
1042

Z
zengyawen 已提交
1043
  ![en-us_image_0000001256858391](figures/en-us_image_0000001256858391.png)
Z
zengyawen 已提交
1044 1045


Z
zengyawen 已提交
1046
### lineTo
Z
zengyawen 已提交
1047

Z
zengyawen 已提交
1048
lineTo(x: number, y: number): void
Z
zengyawen 已提交
1049 1050 1051

Connects the current point to a target position using a straight line.

Z
zengyawen 已提交
1052
- Parameters
H
HelloCrease 已提交
1053 1054 1055 1056
    | Name | Type   | Mandatory | Default Value | Description                          |
    | ---- | ------ | --------- | ------------- | ------------------------------------ |
    | x    | number | Yes       | 0             | X-coordinate of the target position. |
    | y    | number | Yes       | 0             | Y-coordinate of the target position. |
Z
zengyawen 已提交
1057 1058

- Example
H
HelloCrease 已提交
1059

1060 1061
  ```ts
  // xxx.ets
Z
zengyawen 已提交
1062 1063 1064 1065 1066
  @Entry
  @Component
  struct LineTo {
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
H
HelloCrease 已提交
1067

Z
zengyawen 已提交
1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079
    build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{
            this.context.beginPath()
            this.context.moveTo(10, 10)
            this.context.lineTo(280, 160)
            this.context.stroke()
          })
Z
zengyawen 已提交
1080
      }
Z
zengyawen 已提交
1081 1082
      .width('100%')
      .height('100%')
Z
zengyawen 已提交
1083
    }
Z
zengyawen 已提交
1084 1085
  }
  ```
Z
zengyawen 已提交
1086

Z
zengyawen 已提交
1087
  ![en-us_image_0000001212378414](figures/en-us_image_0000001212378414.png)
Z
zengyawen 已提交
1088 1089


Z
zengyawen 已提交
1090
### closePath
Z
zengyawen 已提交
1091

Z
zengyawen 已提交
1092
closePath(): void
Z
zengyawen 已提交
1093 1094 1095

Draws a closed path.

Z
zengyawen 已提交
1096
- Example
H
HelloCrease 已提交
1097

1098 1099
  ```ts
  // xxx.ets
Z
zengyawen 已提交
1100 1101 1102 1103 1104
  @Entry
  @Component
  struct ClosePath {
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
H
HelloCrease 已提交
1105

Z
zengyawen 已提交
1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 1117 1118 1119
    build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{
              this.context.beginPath()
              this.context.moveTo(30, 30)
              this.context.lineTo(110, 30)
              this.context.lineTo(70, 90)
              this.context.closePath()
              this.context.stroke()
          })
Z
zengyawen 已提交
1120
      }
Z
zengyawen 已提交
1121 1122
      .width('100%')
      .height('100%')
Z
zengyawen 已提交
1123
    }
Z
zengyawen 已提交
1124 1125
  }
  ```
Z
zengyawen 已提交
1126

Z
zengyawen 已提交
1127
  ![en-us_image_0000001256978347](figures/en-us_image_0000001256978347.png)
Z
zengyawen 已提交
1128 1129


Z
zengyawen 已提交
1130
### createPattern
Z
zengyawen 已提交
1131

Z
zengyawen 已提交
1132
createPattern(image: ImageBitmap, repetition: string): void
Z
zengyawen 已提交
1133 1134 1135

Creates a pattern for image filling based on a specified source image and repetition mode.

Z
zengyawen 已提交
1136
- Parameters
H
HelloCrease 已提交
1137 1138 1139 1140
    | Name       | Type                                     | Mandatory | Default Value | Description                              |
    | ---------- | ---------------------------------------- | --------- | ------------- | ---------------------------------------- |
    | image      | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Yes       | null          | Source image. For details, see ImageBitmap. |
    | repetition | string                                   | Yes       | ""            | Repetition mode. The value can be **'repeat'**, **'repeat-x'**, **'repeat-y'**, or **'no-repeat'**. |
Z
zengyawen 已提交
1141 1142

- Example
H
HelloCrease 已提交
1143

1144 1145
  ```ts
  // xxx.ets
Z
zengyawen 已提交
1146 1147 1148 1149 1150 1151
  @Entry
  @Component
  struct CreatePattern {
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
    private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
H
HelloCrease 已提交
1152

Z
zengyawen 已提交
1153 1154 1155 1156 1157 1158 1159 1160 1161 1162 1163
    build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{
            var pattern = this.context.createPattern(this.img, 'repeat')
            this.context.fillStyle = pattern
            this.context.fillRect(0, 0, 200, 200)
          })
Z
zengyawen 已提交
1164
      }
Z
zengyawen 已提交
1165 1166
      .width('100%')
      .height('100%')
Z
zengyawen 已提交
1167
    }
Z
zengyawen 已提交
1168 1169
  }
  ```
Z
zengyawen 已提交
1170

Z
zengyawen 已提交
1171
  ![en-us_image_0000001211898490](figures/en-us_image_0000001211898490.png)
Z
zengyawen 已提交
1172 1173


Z
zengyawen 已提交
1174
### bezierCurveTo
Z
zengyawen 已提交
1175

Z
zengyawen 已提交
1176
bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void
Z
zengyawen 已提交
1177 1178 1179

Draws a cubic bezier curve on the canvas.

Z
zengyawen 已提交
1180
- Parameters
H
HelloCrease 已提交
1181 1182 1183 1184 1185 1186 1187 1188
    | Name | Type   | Mandatory | Default Value | Description                              |
    | ---- | ------ | --------- | ------------- | ---------------------------------------- |
    | cp1x | number | Yes       | 0             | X-coordinate of the first parameter of the bezier curve. |
    | cp1y | number | Yes       | 0             | Y-coordinate of the first parameter of the bezier curve. |
    | cp2x | number | Yes       | 0             | X-coordinate of the second parameter of the bezier curve. |
    | cp2y | number | Yes       | 0             | Y-coordinate of the second parameter of the bezier curve. |
    | x    | number | Yes       | 0             | X-coordinate of the end point on the bezier curve. |
    | y    | number | Yes       | 0             | Y-coordinate of the end point on the bezier curve. |
Z
zengyawen 已提交
1189 1190

- Example
H
HelloCrease 已提交
1191

1192 1193
  ```ts
  // xxx.ets
Z
zengyawen 已提交
1194 1195 1196 1197 1198
  @Entry
  @Component
  struct BezierCurveTo {
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
H
HelloCrease 已提交
1199

Z
zengyawen 已提交
1200 1201 1202 1203 1204 1205 1206 1207 1208 1209 1210 1211
    build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{
            this.context.beginPath()
            this.context.moveTo(10, 10)
            this.context.bezierCurveTo(20, 100, 200, 100, 200, 20)
            this.context.stroke()
          })
Z
zengyawen 已提交
1212
      }
Z
zengyawen 已提交
1213 1214
      .width('100%')
      .height('100%')
Z
zengyawen 已提交
1215
    }
Z
zengyawen 已提交
1216 1217
  }
  ```
Z
zengyawen 已提交
1218

Z
zengyawen 已提交
1219
  ![en-us_image_0000001257138349](figures/en-us_image_0000001257138349.png)
Z
zengyawen 已提交
1220 1221


Z
zengyawen 已提交
1222
### quadraticCurveTo
Z
zengyawen 已提交
1223

Z
zengyawen 已提交
1224
quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
Z
zengyawen 已提交
1225 1226 1227

Draws a quadratic curve on the canvas.

Z
zengyawen 已提交
1228
- Parameters
H
HelloCrease 已提交
1229 1230 1231 1232 1233 1234
    | Name | Type   | Mandatory | Default Value | Description                              |
    | ---- | ------ | --------- | ------------- | ---------------------------------------- |
    | cpx  | number | Yes       | 0             | X-coordinate of the bezier curve parameter. |
    | cpy  | number | Yes       | 0             | Y-coordinate of the bezier curve parameter. |
    | x    | number | Yes       | 0             | X-coordinate of the end point on the bezier curve. |
    | y    | number | Yes       | 0             | Y-coordinate of the end point on the bezier curve. |
Z
zengyawen 已提交
1235 1236

- Example
H
HelloCrease 已提交
1237

1238 1239
  ```ts
  // xxx.ets
Z
zengyawen 已提交
1240 1241 1242 1243 1244 1245 1246 1247 1248 1249 1250 1251 1252 1253 1254 1255 1256
  @Entry
  @Component
  struct QuadraticCurveTo {
    private settings: RenderingContextSettings = new RenderingContextSettings(true);
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
    build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{
            this.context.beginPath();
            this.context.moveTo(20, 20);
            this.context.quadraticCurveTo(100, 100, 200, 20);
            this.context.stroke();
        })
Z
zengyawen 已提交
1257
      }
Z
zengyawen 已提交
1258 1259
      .width('100%')
      .height('100%')
Z
zengyawen 已提交
1260
    }
Z
zengyawen 已提交
1261 1262
  }
  ```
Z
zengyawen 已提交
1263

Z
zengyawen 已提交
1264
  ![en-us_image_0000001257058397](figures/en-us_image_0000001257058397.png)
Z
zengyawen 已提交
1265 1266


Z
zengyawen 已提交
1267
### arc
Z
zengyawen 已提交
1268

Z
zengyawen 已提交
1269
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void
Z
zengyawen 已提交
1270 1271 1272

Draws an arc on the canvas.

Z
zengyawen 已提交
1273
- Parameters
H
HelloCrease 已提交
1274 1275 1276 1277 1278 1279 1280 1281
    | Name          | Type    | Mandatory | Default Value | Description                              |
    | ------------- | ------- | --------- | ------------- | ---------------------------------------- |
    | x             | number  | Yes       | 0             | X-coordinate of the center point of the arc. |
    | y             | number  | Yes       | 0             | Y-coordinate of the center point of the arc. |
    | radius        | number  | Yes       | 0             | Radius of the arc.                       |
    | startAngle    | number  | Yes       | 0             | Start radian of the arc.                 |
    | endAngle      | number  | Yes       | 0             | End radian of the arc.                   |
    | anticlockwise | boolean | No        | false         | Whether to draw the arc counterclockwise. |
Z
zengyawen 已提交
1282 1283

- Example
H
HelloCrease 已提交
1284

Z
zengyawen 已提交
1285 1286 1287 1288 1289 1290
  ```
  @Entry
  @Component
  struct Arc {
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
H
HelloCrease 已提交
1291

Z
zengyawen 已提交
1292 1293 1294 1295 1296 1297 1298 1299 1300 1301 1302
    build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{
            this.context.beginPath()
            this.context.arc(100, 75, 50, 0, 6.28)
            this.context.stroke()
          })
Z
zengyawen 已提交
1303
      }
Z
zengyawen 已提交
1304 1305
      .width('100%')
      .height('100%')
Z
zengyawen 已提交
1306
    }
Z
zengyawen 已提交
1307 1308
  }
  ```
Z
zengyawen 已提交
1309

Z
zengyawen 已提交
1310
  ![en-us_image_0000001212378404](figures/en-us_image_0000001212378404.png)
Z
zengyawen 已提交
1311 1312


Z
zengyawen 已提交
1313
### arcTo
Z
zengyawen 已提交
1314

Z
zengyawen 已提交
1315
arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
Z
zengyawen 已提交
1316 1317 1318

Draws an arc based on the radius and points on the arc.

Z
zengyawen 已提交
1319
- Parameters
H
HelloCrease 已提交
1320 1321 1322 1323 1324 1325 1326
    | Name   | Type   | Mandatory | Default Value | Description                              |
    | ------ | ------ | --------- | ------------- | ---------------------------------------- |
    | x1     | number | Yes       | 0             | X-coordinate of the first point on the arc. |
    | y1     | number | Yes       | 0             | Y-coordinate of the first point on the arc. |
    | x2     | number | Yes       | 0             | X-coordinate of the second point on the arc. |
    | y2     | number | Yes       | 0             | Y-coordinate of the second point on the arc. |
    | radius | number | Yes       | 0             | Radius of the arc.                       |
Z
zengyawen 已提交
1327 1328

- Example
H
HelloCrease 已提交
1329

1330 1331
  ```ts
  // xxx.ets
Z
zengyawen 已提交
1332 1333 1334 1335 1336
  @Entry
  @Component
  struct ArcTo {
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
H
HelloCrease 已提交
1337

Z
zengyawen 已提交
1338 1339 1340 1341 1342 1343 1344 1345 1346 1347 1348
    build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{
            this.context.moveTo(100, 20);
            this.context.arcTo(150, 20, 150, 70, 50);
            this.context.stroke();
          })
Z
zengyawen 已提交
1349
      }
Z
zengyawen 已提交
1350 1351
      .width('100%')
      .height('100%')
Z
zengyawen 已提交
1352
    }
Z
zengyawen 已提交
1353 1354
  }
  ```
Z
zengyawen 已提交
1355

Z
zengyawen 已提交
1356
  ![en-us_image_0000001257058413](figures/en-us_image_0000001257058413.png)
Z
zengyawen 已提交
1357 1358


Z
zengyawen 已提交
1359
### ellipse
Z
zengyawen 已提交
1360

Z
zengyawen 已提交
1361
ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void
Z
zengyawen 已提交
1362 1363 1364

Draws an ellipse in the specified rectangular region.

Z
zengyawen 已提交
1365
- Parameters
H
HelloCrease 已提交
1366 1367 1368 1369 1370 1371 1372 1373 1374 1375
    | Name          | Type    | Mandatory | Default Value | Description                              |
    | ------------- | ------- | --------- | ------------- | ---------------------------------------- |
    | x             | number  | Yes       | 0             | X-coordinate of the ellipse center.      |
    | y             | number  | Yes       | 0             | Y-coordinate of the ellipse center.      |
    | radiusX       | number  | Yes       | 0             | Ellipse radius on the x-axis.            |
    | radiusY       | number  | Yes       | 0             | Ellipse radius on the y-axis.            |
    | rotation      | number  | Yes       | 0             | Rotation angle of the ellipse, in radians. |
    | startAngle    | number  | Yes       | 0             | Angle of the start point for drawing the ellipse, in radians. |
    | endAngle      | number  | Yes       | 0             | Angle of the end point for drawing the ellipse, in radians. |
    | anticlockwise | boolean | No        | false         | Whether to draw the ellipse in the counterclockwise direction. |
Z
zengyawen 已提交
1376 1377 1378

- Example

H
HelloCrease 已提交
1379

1380 1381
  ```ts
  // xxx.ets
Z
zengyawen 已提交
1382 1383 1384 1385 1386
  @Entry
  @Component
  struct CanvasExample {
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
H
HelloCrease 已提交
1387

Z
zengyawen 已提交
1388 1389 1390 1391 1392 1393 1394 1395 1396 1397 1398
    build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{
            this.context.beginPath()
            this.context.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI)
            this.context.stroke()
          })
Z
zengyawen 已提交
1399
      }
Z
zengyawen 已提交
1400 1401
      .width('100%')
      .height('100%')
Z
zengyawen 已提交
1402
    }
Z
zengyawen 已提交
1403 1404
  }
  ```
Z
zengyawen 已提交
1405

Z
zengyawen 已提交
1406
  ![en-us_image_0000001256978339](figures/en-us_image_0000001256978339.png)
Z
zengyawen 已提交
1407 1408


Z
zengyawen 已提交
1409
### rect
Z
zengyawen 已提交
1410

Z
zengyawen 已提交
1411
rect(x: number, y: number, width: number, height: number): void
Z
zengyawen 已提交
1412 1413 1414

Creates a rectangle.

Z
zengyawen 已提交
1415
- Parameters
H
HelloCrease 已提交
1416 1417 1418 1419 1420 1421
    | Name   | Type   | Mandatory | Default Value | Description                              |
    | ------ | ------ | --------- | ------------- | ---------------------------------------- |
    | x      | number | Yes       | 0             | X-coordinate of the upper left corner of the rectangle. |
    | y      | number | Yes       | 0             | Y-coordinate of the upper left corner of the rectangle. |
    | width  | number | Yes       | 0             | Width of the rectangle.                  |
    | height | number | Yes       | 0             | Height of the rectangle.                 |
Z
zengyawen 已提交
1422 1423

- Example
H
HelloCrease 已提交
1424

1425 1426
  ```ts
  // xxx.ets
Z
zengyawen 已提交
1427 1428 1429 1430 1431
  @Entry
  @Component
  struct CanvasExample {
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
H
HelloCrease 已提交
1432

Z
zengyawen 已提交
1433 1434 1435 1436 1437 1438 1439 1440 1441 1442
    build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{
            this.context.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20)
            this.context.stroke()
          })
Z
zengyawen 已提交
1443
      }
Z
zengyawen 已提交
1444 1445
      .width('100%')
      .height('100%')
Z
zengyawen 已提交
1446
    }
Z
zengyawen 已提交
1447 1448
  }
  ```
Z
zengyawen 已提交
1449

Z
zengyawen 已提交
1450
  ![en-us_image_0000001256978341](figures/en-us_image_0000001256978341.png)
Z
zengyawen 已提交
1451 1452


Z
zengyawen 已提交
1453
### fill
Z
zengyawen 已提交
1454

Z
zengyawen 已提交
1455
fill(): void
Z
zengyawen 已提交
1456 1457 1458

Fills the area inside a closed path.

Z
zengyawen 已提交
1459
- Example
H
HelloCrease 已提交
1460

1461 1462
  ```ts
  // xxx.ets
Z
zengyawen 已提交
1463 1464 1465 1466 1467
  @Entry
  @Component
  struct Fill {
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
H
HelloCrease 已提交
1468

Z
zengyawen 已提交
1469 1470 1471 1472 1473 1474 1475 1476 1477 1478
    build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{
            this.context.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20)
            this.context.fill()
          })
Z
zengyawen 已提交
1479
      }
Z
zengyawen 已提交
1480 1481
      .width('100%')
      .height('100%')
Z
zengyawen 已提交
1482
    }
Z
zengyawen 已提交
1483 1484
  }
  ```
Z
zengyawen 已提交
1485

Z
zengyawen 已提交
1486
  ![en-us_image_0000001256858389](figures/en-us_image_0000001256858389.png)
Z
zengyawen 已提交
1487 1488


Z
zengyawen 已提交
1489
### clip
Z
zengyawen 已提交
1490

Z
zengyawen 已提交
1491
clip(): void
Z
zengyawen 已提交
1492 1493 1494

Sets the current path to a clipping path.

Z
zengyawen 已提交
1495
- Example
H
HelloCrease 已提交
1496

1497 1498
  ```ts
  // xxx.ets
Z
zengyawen 已提交
1499 1500 1501 1502 1503
  @Entry
  @Component
  struct Clip {
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
H
HelloCrease 已提交
1504

Z
zengyawen 已提交
1505 1506 1507 1508 1509 1510 1511 1512 1513 1514 1515 1516 1517
    build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{
            this.context.rect(0, 0, 200, 200)
            this.context.stroke()
            this.context.clip()
            this.context.fillStyle = "rgb(255,0,0)"
            this.context.fillRect(0, 0, 150, 150)
          })
Z
zengyawen 已提交
1518
      }
Z
zengyawen 已提交
1519 1520
      .width('100%')
      .height('100%')
Z
zengyawen 已提交
1521
    }
Z
zengyawen 已提交
1522 1523
  }
  ```
Z
zengyawen 已提交
1524

Z
zengyawen 已提交
1525
  ![en-us_image_0000001211898488](figures/en-us_image_0000001211898488.png)
Z
zengyawen 已提交
1526 1527


Z
zengyawen 已提交
1528
### rotate
Z
zengyawen 已提交
1529

Z
zengyawen 已提交
1530
rotate(rotate: number): void
Z
zengyawen 已提交
1531 1532 1533

Rotates a canvas clockwise around its coordinate axes.

Z
zengyawen 已提交
1534
- Parameters
H
HelloCrease 已提交
1535 1536 1537
    | Name   | Type   | Mandatory | Default Value | Description                              |
    | ------ | ------ | --------- | ------------- | ---------------------------------------- |
    | rotate | number | Yes       | 0             | Clockwise rotation angle. You can use **Math.PI / 180** to convert the angle to a radian. |
Z
zengyawen 已提交
1538 1539

- Example
H
HelloCrease 已提交
1540

1541 1542
  ```ts
  // xxx.ets
Z
zengyawen 已提交
1543 1544 1545 1546 1547
  @Entry
  @Component
  struct Rotate {
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
H
HelloCrease 已提交
1548

Z
zengyawen 已提交
1549 1550 1551 1552 1553 1554 1555 1556 1557 1558
    build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{
            this.context.rotate(45 * Math.PI / 180) // Rotate the rectangle 45 degrees
            this.context.fillRect(70, 20, 50, 50)
          })
Z
zengyawen 已提交
1559
      }
Z
zengyawen 已提交
1560 1561
      .width('100%')
      .height('100%')
Z
zengyawen 已提交
1562
    }
Z
zengyawen 已提交
1563 1564 1565 1566 1567 1568 1569 1570 1571 1572 1573 1574 1575
  }
  ```

  ![en-us_image_0000001212218442](figures/en-us_image_0000001212218442.png)


### scale

scale(x: number, y: number): void

Scales a canvas based on scale factors.

- Parameters
H
HelloCrease 已提交
1576 1577 1578 1579
    | Name | Type   | Mandatory | Default Value | Description              |
    | ---- | ------ | --------- | ------------- | ------------------------ |
    | x    | number | Yes       | 0             | Horizontal scale factor. |
    | y    | number | Yes       | 0             | Vertical scale factor.   |
Z
zengyawen 已提交
1580 1581

- Example
H
HelloCrease 已提交
1582

1583 1584
  ```ts
  // xxx.ets
Z
zengyawen 已提交
1585 1586 1587 1588 1589
  @Entry
  @Component
  struct Scale {
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
H
HelloCrease 已提交
1590

Z
zengyawen 已提交
1591 1592 1593 1594 1595 1596 1597 1598 1599 1600 1601
    build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{
            this.context.strokeRect(10, 10, 25, 25)
            this.context.scale(2, 2) // Scale to 200%
            this.context.strokeRect(10, 10, 25, 25)
          })
Z
zengyawen 已提交
1602
      }
Z
zengyawen 已提交
1603 1604
      .width('100%')
      .height('100%')
Z
zengyawen 已提交
1605
    }
Z
zengyawen 已提交
1606 1607
  }
  ```
Z
zengyawen 已提交
1608

Z
zengyawen 已提交
1609
  ![en-us_image_0000001257138347](figures/en-us_image_0000001257138347.png)
Z
zengyawen 已提交
1610 1611


Z
zengyawen 已提交
1612
### transform
Z
zengyawen 已提交
1613

Z
zengyawen 已提交
1614
transform(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number): void
Z
zengyawen 已提交
1615 1616 1617

Defines a transformation matrix. To transform a graph, you only need to set parameters of the matrix. The coordinates of the graph are multiplied by the matrix values to obtain new coordinates of the transformed graph. You can use the matrix to implement multiple transform effects.

1618
> **NOTE**<br>
Z
zengyawen 已提交
1619
> The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation.
H
HelloCrease 已提交
1620
>
Z
zengyawen 已提交
1621
> - x' = scaleX \* x + skewY \* y + translateX
H
HelloCrease 已提交
1622
>
Z
zengyawen 已提交
1623 1624 1625
> - y' = skewX \* x + scaleY \* y + translateY

- Parameters
H
HelloCrease 已提交
1626 1627 1628 1629 1630 1631 1632 1633
    | Name       | Type   | Mandatory | Default Value | Description         |
    | ---------- | ------ | --------- | ------------- | ------------------- |
    | scaleX     | number | Yes       | 0             | X-axis scale.       |
    | skewX      | number | Yes       | 0             | X-axis skew.        |
    | skewY      | number | Yes       | 0             | Y-axis skew.        |
    | scaleY     | number | Yes       | 0             | Y-axis scale.       |
    | translateX | number | Yes       | 0             | X-axis translation. |
    | translateY | number | Yes       | 0             | Y-axis translation. |
Z
zengyawen 已提交
1634 1635

- Example
H
HelloCrease 已提交
1636

1637 1638
  ```ts
  // xxx.ets
Z
zengyawen 已提交
1639 1640 1641 1642
  @Entry
  @Component
  struct Transform {
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
H
HelloCrease 已提交
1643 1644
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

Z
zengyawen 已提交
1645 1646 1647 1648 1649 1650 1651 1652 1653 1654 1655 1656 1657 1658 1659 1660
    build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{
            this.context.fillStyle = 'rgb(0,0,0)'
            this.context.fillRect(0, 0, 100, 100)
            this.context.transform(1, 0.5, -0.5, 1, 10, 10)
            this.context.fillStyle = 'rgb(255,0,0)'
            this.context.fillRect(0, 0, 100, 100)
            this.context.transform(1, 0.5, -0.5, 1, 10, 10)
            this.context.fillStyle = 'rgb(0,0,255)'
            this.context.fillRect(0, 0, 100, 100)
          })
Z
zengyawen 已提交
1661
      }
Z
zengyawen 已提交
1662 1663
      .width('100%')
      .height('100%')
Z
zengyawen 已提交
1664
    }
Z
zengyawen 已提交
1665 1666 1667 1668 1669 1670 1671 1672 1673 1674 1675 1676 1677
  }
  ```

  ![en-us_image_0000001256858393](figures/en-us_image_0000001256858393.png)


### setTransform

setTransform(scaleX: number, skewX: number, skewY: number, scale: number, translateX: number, translateY: number): void

Resets the existing transformation matrix and creates a new transformation matrix by using the same parameters as the **transform()** function.

- Parameters
H
HelloCrease 已提交
1678 1679 1680 1681 1682 1683 1684 1685
    | Name       | Type   | Mandatory | Default Value | Description         |
    | ---------- | ------ | --------- | ------------- | ------------------- |
    | scaleX     | number | Yes       | 0             | X-axis scale.       |
    | skewX      | number | Yes       | 0             | X-axis skew.        |
    | skewY      | number | Yes       | 0             | Y-axis skew.        |
    | scaleY     | number | Yes       | 0             | Y-axis scale.       |
    | translateX | number | Yes       | 0             | X-axis translation. |
    | translateY | number | Yes       | 0             | Y-axis translation. |
Z
zengyawen 已提交
1686 1687

- Example
H
HelloCrease 已提交
1688

1689 1690
  ```ts
  // xxx.ets
Z
zengyawen 已提交
1691 1692 1693 1694 1695
  @Entry
  @Component
  struct SetTransform {
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
H
HelloCrease 已提交
1696

Z
zengyawen 已提交
1697 1698 1699 1700 1701 1702 1703 1704 1705 1706 1707 1708 1709
    build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{
            this.context.fillStyle = 'rgb(255,0,0)'
            this.context.fillRect(0, 0, 100, 100)
            this.context.setTransform(1,0.5, -0.5, 1, 10, 10)
            this.context.fillStyle = 'rgb(0,0,255)'
            this.context.fillRect(0, 0, 100, 100)
          })
Z
zengyawen 已提交
1710
      }
Z
zengyawen 已提交
1711 1712
      .width('100%')
      .height('100%')
Z
zengyawen 已提交
1713
    }
Z
zengyawen 已提交
1714 1715
  }
  ```
Z
zengyawen 已提交
1716

Z
zengyawen 已提交
1717
  ![en-us_image_0000001256858395](figures/en-us_image_0000001256858395.png)
Z
zengyawen 已提交
1718 1719


Z
zengyawen 已提交
1720
### translate
Z
zengyawen 已提交
1721

Z
zengyawen 已提交
1722
translate(x: number, y: number): void
Z
zengyawen 已提交
1723 1724 1725

Moves the origin of the coordinate system.

Z
zengyawen 已提交
1726
- Parameters
H
HelloCrease 已提交
1727 1728 1729 1730
    | Name | Type   | Mandatory | Default Value | Description         |
    | ---- | ------ | --------- | ------------- | ------------------- |
    | x    | number | Yes       | 0             | X-axis translation. |
    | y    | number | Yes       | 0             | Y-axis translation. |
Z
zengyawen 已提交
1731 1732

- Example
H
HelloCrease 已提交
1733

1734 1735
  ```ts
  // xxx.ets
Z
zengyawen 已提交
1736 1737 1738 1739 1740
  @Entry
  @Component
  struct Translate {
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
H
HelloCrease 已提交
1741

Z
zengyawen 已提交
1742 1743 1744 1745 1746 1747 1748 1749 1750 1751 1752
    build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{
            this.context.fillRect(10, 10, 50, 50)
            this.context.translate(70, 70)
            this.context.fillRect(10, 10, 50, 50)
          })
Z
zengyawen 已提交
1753
      }
Z
zengyawen 已提交
1754 1755
      .width('100%')
      .height('100%')
Z
zengyawen 已提交
1756
    }
Z
zengyawen 已提交
1757 1758
  }
  ```
Z
zengyawen 已提交
1759

Z
zengyawen 已提交
1760
  ![en-us_image_0000001257138357](figures/en-us_image_0000001257138357.png)
Z
zengyawen 已提交
1761 1762


Z
zengyawen 已提交
1763
### drawImage
Z
zengyawen 已提交
1764

1765
drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number): void
Z
zengyawen 已提交
1766

1767
drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number, dWidth: number, dHeight: number): void
Z
zengyawen 已提交
1768

1769
drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number):void
Z
zengyawen 已提交
1770 1771 1772

Draws an image.

Z
zengyawen 已提交
1773
- Parameters
E
ester.zhou 已提交
1774 1775 1776 1777 1778 1779 1780 1781 1782 1783 1784
    | Name    | Type                                                         | Mandatory | Default Value | Description                                                  |
    | ------- | ------------------------------------------------------------ | --------- | ------------- | ------------------------------------------------------------ |
    | image   | [ImageBitmap](ts-components-canvas-imagebitmap.md) or [PixelMap](../apis/js-apis-image.md#pixelmap7) | Yes       | null          | Image resource. For details, see ImageBitmap or PixelMap.    |
    | sx      | number                                                       | No        | 0             | X-coordinate of the upper left corner of the rectangle used to crop the source image. |
    | sy      | number                                                       | No        | 0             | Y-coordinate of the upper left corner of the rectangle used to crop the source image. |
    | sWidth  | number                                                       | No        | 0             | Target width to crop the source image.                       |
    | sHeight | number                                                       | No        | 0             | Target height to crop the source image.                      |
    | dx      | number                                                       | Yes       | 0             | X-coordinate of the upper left corner of the drawing area on the canvas. |
    | dy      | number                                                       | Yes       | 0             | Y-coordinate of the upper left corner of the drawing area on the canvas. |
    | dWidth  | number                                                       | No        | 0             | Width of the drawing area. If the width of the drawing area is different from that of the cropped image, the latter will be stretched or compressed to the former. |
    | dHeight | number                                                       | No        | 0             | Height of the drawing area. If the height of the drawing area is different from that of the cropped image, the latter will be stretched or compressed to the former. |
Z
zengyawen 已提交
1785 1786 1787


- Example
H
HelloCrease 已提交
1788

1789 1790
  ```ts
  // xxx.ets
Z
zengyawen 已提交
1791 1792 1793 1794 1795 1796 1797 1798 1799 1800 1801 1802 1803 1804 1805
  @Entry
  @Component
  struct ImageExample {
    private settings: RenderingContextSettings = new RenderingContextSettings(true);
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
    private img:ImageBitmap = new ImageBitmap("common/images/example.jpg");
    build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{
            this.context.drawImage( this.img,0,0,500,500,0,0,400,200);
        })
Z
zengyawen 已提交
1806
      }
Z
zengyawen 已提交
1807 1808
      .width('100%')
      .height('100%')
Z
zengyawen 已提交
1809
    }
Z
zengyawen 已提交
1810 1811 1812 1813 1814 1815 1816 1817 1818 1819
  }
  ```

  ![en-us_image_0000001212058466](figures/en-us_image_0000001212058466.png)


### createImageData

createImageData(width: number, height: number): Object

E
esterzhou 已提交
1820
Creates an **ImageData** object. For details, see [ImageData](ts-components-canvas-imagebitmap.md).
Z
zengyawen 已提交
1821 1822

- Parameters
H
HelloCrease 已提交
1823 1824 1825 1826
    | Name   | Type   | Mandatory | Default Value | Description                         |
    | ------ | ------ | --------- | ------------- | ----------------------------------- |
    | width  | number | Yes       | 0             | Width of the **ImageData** object.  |
    | height | number | Yes       | 0             | Height of the **ImageData** object. |
Z
zengyawen 已提交
1827 1828 1829 1830 1831 1832


### createImageData

createImageData(imageData: Object): Object

E
esterzhou 已提交
1833
Creates an **ImageData** object. For details, see [ImageData](ts-components-canvas-imagebitmap.md).
Z
zengyawen 已提交
1834 1835

- Parameters
H
HelloCrease 已提交
1836 1837 1838
    | Name      | Type   | Mandatory | Default Value | Description                              |
    | --------- | ------ | --------- | ------------- | ---------------------------------------- |
    | imagedata | Object | Yes       | null          | **ImageData** object with the same width and height copied from the original **ImageData** object. |
Z
zengyawen 已提交
1839

1840 1841 1842 1843 1844 1845 1846 1847 1848 1849 1850 1851
### getPixelMap

getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap

Obtains the **[PixelMap](../apis/js-apis-image.md#pixelmap7)** object created with the pixels within the specified area on the canvas.
- Parameters
  | Name  | Type    | Mandatory  | Default Value | Description             |
  | ---- | ------ | ---- | ---- | --------------- |
  | sx   | number | Yes   | 0    | X-coordinate of the upper left corner of the output area.|
  | sy   | number | Yes   | 0    | Y-coordinate of the upper left corner of the output area.|
  | sw   | number | Yes   | 0    | Width of the output area.    |
  | sh   | number | Yes   | 0    | Height of the output area.    |
Z
zengyawen 已提交
1852 1853 1854 1855 1856

### getImageData

getImageData(sx: number, sy: number, sw: number, sh: number): Object

1857
Creates an **[ImageData](ts-components-canvas-imagebitmap.md)** object with pixels in the specified area on the canvas.
Z
zengyawen 已提交
1858
- Parameters
H
HelloCrease 已提交
1859 1860 1861 1862 1863 1864
    | Name | Type   | Mandatory | Default Value | Description                              |
    | ---- | ------ | --------- | ------------- | ---------------------------------------- |
    | sx   | number | Yes       | 0             | X-coordinate of the upper left corner of the output area. |
    | sy   | number | Yes       | 0             | Y-coordinate of the upper left corner of the output area. |
    | sw   | number | Yes       | 0             | Width of the output area.                |
    | sh   | number | Yes       | 0             | Height of the output area.               |
Z
zengyawen 已提交
1865 1866 1867 1868 1869 1870


### putImageData

putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?: number, dirtyWidth?: number, dirtyHeight?: number): void

1871
Puts the **[ImageData](ts-components-canvas-imagebitmap.md)** onto a rectangular area on the canvas.
Z
zengyawen 已提交
1872 1873

- Parameters
H
HelloCrease 已提交
1874 1875 1876 1877 1878 1879 1880 1881 1882
    | Name        | Type   | Mandatory | Default Value                      | Description                              |
    | ----------- | ------ | --------- | ---------------------------------- | ---------------------------------------- |
    | imagedata   | Object | Yes       | null                               | **ImageData** object with pixels to put onto the canvas. |
    | dx          | number | Yes       | 0                                  | X-axis offset of the rectangular area on the canvas. |
    | dy          | number | Yes       | 0                                  | Y-axis offset of the rectangular area on the canvas. |
    | dirtyX      | number | No        | 0                                  | X-axis offset of the upper left corner of the rectangular area relative to that of the source image. |
    | dirtyY      | number | No        | 0                                  | Y-axis offset of the upper left corner of the rectangular area relative to that of the source image. |
    | dirtyWidth  | number | No        | Width of the **ImageData** object  | Width of the rectangular area to crop the source image. |
    | dirtyHeight | number | No        | Height of the **ImageData** object | Height of the rectangular area to crop the source image. |
Z
zengyawen 已提交
1883 1884

- Example
H
HelloCrease 已提交
1885

1886 1887
  ```ts
  // xxx.ets
Z
zengyawen 已提交
1888 1889 1890 1891 1892
  @Entry
  @Component
  struct PutImageData {
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
H
HelloCrease 已提交
1893

Z
zengyawen 已提交
1894 1895 1896 1897 1898 1899 1900 1901 1902 1903 1904 1905 1906 1907 1908 1909
    build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{
            var imageData = this.context.createImageData(100, 100)
            for (var i = 0; i < imageData.data.length; i += 4) {
              imageData.data[i + 0] = 255
              imageData.data[i + 1] = 0
              imageData.data[i + 2] = 255
              imageData.data[i + 3] = 255
            }
            this.context.putImageData(imageData, 10, 10)
          })
Z
zengyawen 已提交
1910
      }
Z
zengyawen 已提交
1911 1912
      .width('100%')
      .height('100%')
Z
zengyawen 已提交
1913
    }
Z
zengyawen 已提交
1914 1915
  }
  ```
Z
zengyawen 已提交
1916

Z
zengyawen 已提交
1917
  ![en-us_image_0000001212378396](figures/en-us_image_0000001212378396.png)
Z
zengyawen 已提交
1918 1919


Z
zengyawen 已提交
1920
### restore
Z
zengyawen 已提交
1921

Z
zengyawen 已提交
1922
restore(): void
Z
zengyawen 已提交
1923 1924 1925

Restores the saved drawing context.

Z
zengyawen 已提交
1926
- Example
H
HelloCrease 已提交
1927

1928 1929
  ```ts
  // xxx.ets
Z
zengyawen 已提交
1930 1931 1932 1933 1934
  @Entry
  @Component
  struct CanvasExample {
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
H
HelloCrease 已提交
1935

Z
zengyawen 已提交
1936 1937 1938 1939 1940 1941 1942 1943 1944
    build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{
            this.context.restore()
          })
Z
zengyawen 已提交
1945
      }
Z
zengyawen 已提交
1946 1947
      .width('100%')
      .height('100%')
Z
zengyawen 已提交
1948
    }
Z
zengyawen 已提交
1949 1950
  }
  ```
Z
zengyawen 已提交
1951 1952


Z
zengyawen 已提交
1953
### save
Z
zengyawen 已提交
1954

Z
zengyawen 已提交
1955
save(): void
Z
zengyawen 已提交
1956 1957 1958

Saves the current drawing context.

Z
zengyawen 已提交
1959
- Example
H
HelloCrease 已提交
1960

1961 1962
  ```ts
  // xxx.ets
Z
zengyawen 已提交
1963 1964 1965 1966 1967
  @Entry
  @Component
  struct CanvasExample {
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
H
HelloCrease 已提交
1968

Z
zengyawen 已提交
1969 1970 1971 1972 1973 1974 1975 1976 1977
    build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{
            this.context.save()
        })
Z
zengyawen 已提交
1978
      }
Z
zengyawen 已提交
1979 1980
      .width('100%')
      .height('100%')
Z
zengyawen 已提交
1981
    }
Z
zengyawen 已提交
1982 1983
  }
  ```
Z
zengyawen 已提交
1984 1985


Z
zengyawen 已提交
1986
### createLinearGradient
Z
zengyawen 已提交
1987

Z
zengyawen 已提交
1988
createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
Z
zengyawen 已提交
1989 1990 1991

Creates a linear gradient.

Z
zengyawen 已提交
1992
- Parameters
H
HelloCrease 已提交
1993 1994 1995 1996 1997 1998
    | Name | Type   | Mandatory | Default Value | Description                      |
    | ---- | ------ | --------- | ------------- | -------------------------------- |
    | x0   | number | Yes       | 0             | X-coordinate of the start point. |
    | y0   | number | Yes       | 0             | Y-coordinate of the start point. |
    | x1   | number | Yes       | 0             | X-coordinate of the end point.   |
    | y1   | number | Yes       | 0             | Y-coordinate of the end point.   |
Z
zengyawen 已提交
1999 2000

- Example
H
HelloCrease 已提交
2001

2002 2003
  ```ts
  // xxx.ets
Z
zengyawen 已提交
2004 2005 2006 2007 2008
  @Entry
  @Component
  struct CreateLinearGradient {
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
Z
zengyawen 已提交
2009
    
Z
zengyawen 已提交
2010 2011 2012 2013 2014 2015 2016 2017
    build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{
            var grad = this.context.createLinearGradient(50,0, 300,100)
H
HelloCrease 已提交
2018 2019 2020
            grad.addColorStop(0.0, 'red')
            grad.addColorStop(0.5, 'white')
            grad.addColorStop(1.0, 'green')
Z
zengyawen 已提交
2021 2022 2023
            this.context.fillStyle = grad
            this.context.fillRect(0, 0, 500, 500)
          })
Z
zengyawen 已提交
2024
      }
Z
zengyawen 已提交
2025 2026
      .width('100%')
      .height('100%')
Z
zengyawen 已提交
2027
    }
Z
zengyawen 已提交
2028 2029
  }
  ```
Z
zengyawen 已提交
2030

Z
zengyawen 已提交
2031
  ![en-us_image_0000001212378412](figures/en-us_image_0000001212378412.png)
Z
zengyawen 已提交
2032 2033


Z
zengyawen 已提交
2034
### createRadialGradient
Z
zengyawen 已提交
2035

Z
zengyawen 已提交
2036
createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): void
Z
zengyawen 已提交
2037 2038 2039

Creates a linear gradient.

Z
zengyawen 已提交
2040
- Parameters
H
HelloCrease 已提交
2041 2042 2043 2044 2045 2046 2047 2048
    | Name | Type   | Mandatory | Default Value | Description                              |
    | ---- | ------ | --------- | ------------- | ---------------------------------------- |
    | x0   | number | Yes       | 0             | X-coordinate of the center of the start circle. |
    | y0   | number | Yes       | 0             | Y-coordinate of the center of the start circle. |
    | r0   | number | Yes       | 0             | Radius of the start circle, which must be a non-negative finite number. |
    | x1   | number | Yes       | 0             | X-coordinate of the center of the end circle. |
    | y1   | number | Yes       | 0             | Y-coordinate of the center of the end circle. |
    | r1   | number | Yes       | 0             | Radius of the end circle, which must be a non-negative finite number. |
Z
zengyawen 已提交
2049 2050

- Example
H
HelloCrease 已提交
2051

2052 2053
  ```ts
  // xxx.ets
Z
zengyawen 已提交
2054 2055 2056 2057 2058 2059 2060 2061 2062 2063 2064 2065 2066 2067
  @Entry
  @Component
  struct CreateRadialGradient {
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
    
    build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{
            var grad = this.context.createRadialGradient(200,200,50, 200,200,200)
H
HelloCrease 已提交
2068 2069 2070
            grad.addColorStop(0.0, 'red')
            grad.addColorStop(0.5, 'white')
            grad.addColorStop(1.0, 'green')
Z
zengyawen 已提交
2071 2072 2073
            this.context.fillStyle = grad
            this.context.fillRect(0, 0, 500, 500)
          })
Z
zengyawen 已提交
2074
      }
Z
zengyawen 已提交
2075 2076
      .width('100%')
      .height('100%')
Z
zengyawen 已提交
2077
    }
Z
zengyawen 已提交
2078 2079
  }
  ```
Z
zengyawen 已提交
2080

Z
zengyawen 已提交
2081
  ![en-us_image_0000001257058405](figures/en-us_image_0000001257058405.png)
Z
zengyawen 已提交
2082 2083


Z
zengyawen 已提交
2084
## CanvasPattern
Z
zengyawen 已提交
2085

Z
zengyawen 已提交
2086
Defines an object created by using the [createPattern](#createpattern) method.