HarmonyOS/OpenHarmony应用开发-ArkTS画布组件Canvas

不能说的秘密

提供画布组件，用于自定义绘制图形。该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。子组件，不支持。
接口：Canvas(context?: CanvasRenderingContext2D)
参数：

参数名	参数类型	必填	默认值	参数描述
context	CanvasRenderingContext2D	否	-	见CanvasRenderingContext2D对象。

属性，支持通用属性。
事件
除支持通用事件外，还支持如下事件

示例代码：

1. // xxx.ets
   
2. @Entry
   
3. @Component
   
4. struct CanvasExample {
   
5.   private settings: RenderingContextSettings = new RenderingContextSettings(true)
   
6.   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
7. 
   
8.   build() {
   
9.     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
   
10.       Canvas(this.context)
    
11.         .width('100%')
    
12.         .height('100%')
    
13.         .backgroundColor('#ffff00')
    
14.         .onReady(() => {
    
15.           this.context.fillRect(0, 30, 100, 100)
    
16.         })
    
17.     }
    
18.     .width('100%')
    
19.     .height('100%')
    
20.   }
    
21. }

复制代码

效果