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) | 否 | - | 见CanvasRenderingContext2D对象。 | 24 25## 属性 26 27支持通用属性。 28 29## 事件 30 31除支持通用事件外，还支持如下事件： 32 33| 名称 | 参数 | 描述 | 34| ----------------------------- | ---- | -------------------- | 35| onReady(event: () => void) | 无 | Canvas组件初始化完成时的事件回调，该事件之后Canvas组件宽高确定且可获取，可使用Canvas相关API进行绘制。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 36 37 38**示例：** 39 40```ts 41// xxx.ets 42@Entry 43@Component 44struct CanvasExample { 45 private settings: RenderingContextSettings = new RenderingContextSettings(true) 46 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 47 48 build() { 49 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 50 Canvas(this.context) 51 .width('100%') 52 .height('100%') 53 .backgroundColor('#ffff00') 54 .onReady(() => { 55 this.context.fillRect(0, 30, 100, 100) 56 }) 57 } 58 .width('100%') 59 .height('100%') 60 } 61} 62``` 63 
