1# Canvas 2 3提供画布组件，用于自定义绘制图形。 4 5> **说明：** 6> 7> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10 11## 权限列表 12 13无 14 15## 子组件 16 17不支持。 18 19## 接口 20 21Canvas(context?: CanvasRenderingContext2D) 22 23**参数：** 24 25| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 26| ------- | ---------------------------------------- | ---- | ---- | ---------------------------- | 27| context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) | 否 | - | 见CanvasRenderingContext2D对象。 | 28 29## 属性 30 31支持通用属性。 32 33## 事件 34 35除支持通用事件外，还支持如下事件： 36 37| 名称 | 参数 | 描述 | 38| ----------------------------- | ---- | -------------------- | 39| onReady(event: () => void) | 无 | 画布组件的事件回调，可以在此时进行绘制。 | 40 41 42**示例：** 43 44```ts 45// xxx.ets 46@Entry 47@Component 48struct CanvasExample { 49 private settings: RenderingContextSettings = new RenderingContextSettings(true) 50 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 51 52 build() { 53 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 54 Canvas(this.context) 55 .width('100%') 56 .height('100%') 57 .backgroundColor('#ffff00') 58 .onReady(() => { 59 this.context.fillRect(0, 30, 100, 100) 60 }) 61 } 62 .width('100%') 63 .height('100%') 64 } 65} 66``` 67 
