ts-components-canvas-canvas.md 1.9 KB
Newer Older
E
ester.zhou 已提交
1
#  Canvas
Z
zengyawen 已提交
2

E
ester.zhou 已提交
3
The **\<Canvas>** component can be used to customize drawings.
Z
zengyawen 已提交
4

E
ester.zhou 已提交
5
> **NOTE**
E
esterzhou 已提交
6 7 8
> 
>  This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.

Z
zengyawen 已提交
9

Z
zengyawen 已提交
10 11

## Required Permissions
Z
zengyawen 已提交
12 13 14

None

Z
zengyawen 已提交
15
## Child Components
Z
zengyawen 已提交
16

E
ester.zhou 已提交
17
Not supported
Z
zengyawen 已提交
18 19 20

## APIs

E
ester.zhou 已提交
21
Canvas(context?: CanvasRenderingContext2D)
Z
zengyawen 已提交
22

E
ester.zhou 已提交
23
**Parameters**
Z
zengyawen 已提交
24

E
ester.zhou 已提交
25 26 27
| Name    | Type                                    | Mandatory  | Default Value | Description                        |
| ------- | ---------------------------------------- | ---- | ---- | ---------------------------- |
| context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) | No   | -    | For details, see **CanvasRenderingContext2D**.|
Z
zengyawen 已提交
28 29 30

## Attributes

E
ester.zhou 已提交
31
The [universal attributes](ts-universal-attributes-size.md) are supported.
Z
zengyawen 已提交
32 33 34

## Events

E
ester.zhou 已提交
35
In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
Z
zengyawen 已提交
36

E
ester.zhou 已提交
37 38 39
| Name                           | Parameter  | Description                  |
| ----------------------------- | ---- | -------------------- |
| onReady(event: () => void) | -   | Triggered when a canvas is ready. When this event is triggered, the width and height of the canvas can be obtained, and you can use the canvas APIs to draw images.|
Z
zengyawen 已提交
40

E
esterzhou 已提交
41 42

**Example**
Z
zengyawen 已提交
43

E
ester.zhou 已提交
44 45
```ts
// xxx.ets
Z
zengyawen 已提交
46 47 48
@Entry
@Component
struct CanvasExample {
E
ester.zhou 已提交
49
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
Z
zengyawen 已提交
50 51 52 53 54 55 56 57
  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')
E
esterzhou 已提交
58 59
        .onReady(() => {
          this.context.fillRect(0, 30, 100, 100)
Z
zengyawen 已提交
60 61 62 63 64 65 66
        })
    }
    .width('100%')
    .height('100%')
  }
}
```
E
esterzhou 已提交
67
  ![en-us_image_0000001194032666](figures/en-us_image_0000001194032666.png)