1# Canvas 2 3提供画布组件，用于自定义绘制图形。 4 5> **说明：** 6> 7> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## 子组件 10 11不支持。 12 13## 接口 14 15Canvas(context?: CanvasRenderingContext2D) 16 17从API version 9开始，该接口支持在ArkTS卡片中使用。 18 19**参数：** 20 21| 参数名 | 参数类型 | 必填 | 参数描述 | 22| ------- | ---------------------------------------- | ---- | ---------------------------------------- | 23| context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) | 否 | 不支持多个Canvas共用一个CanvasRenderingContext2D对象，具体描述见CanvasRenderingContext2D对象。 | 24 25## 属性 26 27支持[通用属性](ts-universal-attributes-size.md)。 28 29## 事件 30 31除支持[通用事件](ts-universal-events-click.md)外，还支持如下事件： 32 33| 名称 | 描述 | 34| -------------------------- | ---------------------------------------- | 35| onReady(event: () => void) | Canvas组件初始化完成时或者Canvas组件发生大小变化时的事件回调，当该事件被触发时画布被清空，该事件之后Canvas组件宽高确定且可获取，可使用Canvas相关API进行绘制。当Canvas组件仅发生位置变化时，只触发onAreaChange事件、不触发onReady事件。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 36 37**示例：** 38 39```ts 40// xxx.ets 41@Entry 42@Component 43struct CanvasExample { 44 private settings: RenderingContextSettings = new RenderingContextSettings(true) 45 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 46 47 build() { 48 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 49 Canvas(this.context) 50 .width('100%') 51 .height('100%') 52 .backgroundColor('#ffff00') 53 .onReady(() => { 54 this.context.fillRect(0, 30, 100, 100) 55 }) 56 } 57 .width('100%') 58 .height('100%') 59 } 60} 61``` 62  63
